文章/答案/技术大牛

发布

社区首页 >问答首页 >SVG和VML路径填充差异

问SVG和VML路径填充差异
EN

Stack Overflow用户

提问于 2013-02-07 14:44:23

回答 1查看 1.3K关注 0票数 0

我从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>

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

vml

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-07 15:25:22

当然，你只想要一个奇数的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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14745193

复制

相似问题

问SVG和VML路径填充差异
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG和VML路径填充差异EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG和VML路径填充差异
EN