代码之家 › 专栏 › 技术社区 › user2171796

两个M。。。Z序列相遇,背景颜色显现

svg

user2171796 · 技术社区 · 9 月前

我在这里有一个非常简单的svg路径,但由于某种原因,某些部分在应该是黑色的时候有背景颜色。这是一个简短、定义明确的输入,也是一个简短且定义明确的输出。有人知道为什么这应该是输出吗?

为了清楚起见,我在每个顶点都放了一个彩色点。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="214" height="317" viewBox="0 0 214 317" xmlns="http://www.w3.org/2000/svg">
        <path d="M 199 317 L 107 32.5 L 14.5 317 L 0 317 L 105 0 L 109 0 L 214 317 L 199 317 Z 
                 M 166 199 L 44.5 199 L 41.5 211 L 170.5 211 Z" />
        <!-- The 2nd M...Z is the horizontal piece. -->
        <circle cx="166" cy="199" r="2" fill="red" stroke="none" />
        <circle cx="44.5" cy="199" r="2" fill="green" stroke="none" />
        <circle cx="41.5" cy="211" r="2" fill="blue" stroke="none" />
        <circle cx="170.5" cy="211" r="2" fill="yellow" stroke="none" />
    </svg>
</body>
</html>

1 回复 | 直到 9 月前

Carsten Massmann 9 月前

在第二部分更改你的分数顺序 d 属性在你 <path> 元素:

<svg width="214" height="317" viewBox="0 0 214 317" xmlns="http://www.w3.org/2000/svg">
    <path d="M 199 317 L 107 32.5 L 14.5 317 L 0 317 L 105 0 L 109 0 L 214 317 L 199 317 Z 
             M 166 199 L 170.5 211 L 41.5 211 L 44.5 199 Z" />
    <!-- The 2nd M...Z is the horizontal piece. -->
    <circle cx="166" cy="199" r="2" fill="red" stroke="none" />
    <circle cx="44.5" cy="199" r="2" fill="green" stroke="none" />
    <circle cx="41.5" cy="211" r="2" fill="blue" stroke="none" />
    <circle cx="170.5" cy="211" r="2" fill="yellow" stroke="none" />
</svg>

通过更改点的顺序,您可以观察到 fill-rule 属性。此处的默认值为 "nonzero" ,但如果你把它改成 "evenodd" 您将再次获得原始外观:

<svg width="214" height="317" viewBox="0 0 214 317" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M 199 317 L 107 32.5 L 14.5 317 L 0 317 L 105 0 L 109 0 L 214 317 L 199 317 Z 
             M 166 199 L 170.5 211 L 41.5 211 L 44.5 199 Z" />
    <!-- The 2nd M...Z is the horizontal piece. -->
    <circle cx="166" cy="199" r="2" fill="red" stroke="none" />
    <circle cx="44.5" cy="199" r="2" fill="green" stroke="none" />
    <circle cx="41.5" cy="211" r="2" fill="blue" stroke="none" />
    <circle cx="170.5" cy="211" r="2" fill="yellow" stroke="none" />
</svg>