Question

目前，我有以下svg：

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" onclick='dispcoord(evt)' viewBox="0 0 80 80">
        <g class="background" stroke-width="3" fill="transparent">
            <circle cx="40" cy="40" r="39" stroke="black" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(112.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(202.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(292.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(22.5, 40,40)" />
            <circle cx="40" cy="40" r="44" stroke="transparent" stroke-width="7" />
        </g>
</svg>

http://jsfiddle.net/r5HYK/1/

正如你所看到的那样，黑色的圆圈上添加了一些“角落”（dunno如何用英语称呼它）。但是这些“角落”都在圆圈内外，但我想只在里面。要查看它应该是什么样子，您可以将带外注释的圆圈添加到svg。

但是这个解决方案对我不起作用，因为这个svg应该包含在一个更大的svg文件中，其中删除外部“角落”的圆圈本身是可见的。所以我正在寻找能够移除这个外部“角落”（可能是过滤器？）的东西，但没有任何其他效果。另一种解决方案是单侧笔划，因为此刻笔划向两侧扩展，但我目前还不知道这是否存在。

有什么建议吗？

Answer 1

你想要的是一个clipPath。你可以剪掉圆圈外的所有东西。

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" onclick='dispcoord(evt)' viewBox="0 0 80 80">
    <defs>
        <clipPath id="clip1">
            <circle cx="40" cy="40" r="39" fill="black" />
        </clipPath>
    </defs>

        <g class="background" stroke-width="3" fill="transparent" clip-path="url(#clip1)">
            <circle cx="40" cy="40" r="39" stroke="black" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(112.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(202.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(292.5, 40,40)" />
            <path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(22.5, 40,40)" />
            <circle cx="40" cy="40" r="44" stroke="transparent" stroke-width="7" />
        </g>
</svg>

SVG仅在一个方向上行程

1 个答案: