Разница в заполнении пути SVG и VML

Я перехожу с VML на SVG. Есть проблема с заполнением пути. Вот пример:

звезда, нарисованная с помощью VML и SVG

Слева звезда нарисована с помощью VML, а справа с помощью SVG. Исходный код для VML (работает только в IE):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style> v\:* { behavior: url(#default#VML); }</style >
</head>
<body>
    <div style="width:300; height:270;">
        <v:shape fillcolor="blue" strokecolor="red" coordorigin="0 0" coordsize="300 270"
            strokeweight="2" style="position:relative; top:20; left:20; width:300; height:270" 
            path="m150,20 l240,240 l30,90 l270,90 l60,240 x e">
        </v:shape>
    </div>
</body>

Source code for SVG:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <svg width="300" height="270">
            <path d="M150,20 L240,240 L30,90 L270,90 L60,240 Z" fill="blue" stroke="red" stroke-width="3"/>
        </svg>
    </body>
</html>

Очевидна разница в заполнении середины звезды. Я предпочитаю стиль VML. Есть ли способы сделать это с помощью SVG?


svg html vml
person Luka    schedule 07.02.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Конечно, вам просто нужно правило заполнения

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <svg width="300" height="270">
            <path d="M150,20 L240,240 L30,90 L270,90 L60,240 Z" fill-rule="evenodd" fill="blue" stroke="red" stroke-width="3"/>
        </svg>
    </body>
</html>
person Robert Longson    schedule 07.02.2013