SVG和VML路径填充差异

我从VML迁移到SVG。路径填充方式存在问题。这里有一个例子：SVG和VML路径填充差异

star drawn with VML and 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>

对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做到这一点？

来源

2013-02-07 Luka

当然，你只是想要一个EVENODD fill-rule

<!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>

来源

2013-02-07 07:25:21

SVG和VML路径填充差异

回答

相关问题