避免在 SVG 中剪切符号

Posted 2023-02-25

【中文标题】避免在 SVG 中剪切符号

【英文标题】：Avoiding the clipping of symbols in SVG

【发布时间】：2013-11-14 15:22:06

【问题描述】：

对于我的使用来说，将 SVG symbols 列表以零为中心对我来说会很方便，这使得它们在 use 中的位置更容易。例如，一个简单的圆形符号的中心为零，然后是给定的半径。但是，使用标准剪裁会剪掉 3/4 的圆。这是一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"   preserveAspectRatio="xMidYMid meet"
     viewBox="0.0 0.0 230.0 150.0">
    <rect x="0.0" y="0.0"   style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
    <symbol id="concentric">
        <circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
        <circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
    </symbol>   
    <use xlink:href="#concentric" x="20" y="20" />
    <use xlink:href="#concentric" x="40" y="20" />
    <use xlink:href="#concentric" x="60" y="20" />
</svg>

这将导致符号“同心”的三种用途，但由于原始符号在 0,0 处有两个圆，因此四分之三的符号被剪裁。

不将符号剪裁在 0 0 处的最简单方法是什么？

【参考方案1】：

如果你不想剪裁，你可以使用overflow="visible" 来关闭它。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"   preserveAspectRatio="xMidYMid meet"
     viewBox="0.0 0.0 230.0 150.0">
    <rect x="0.0" y="0.0"   style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
    <symbol id="concentric" overflow="visible">
        <circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
        <circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
    </symbol>   
    <use xlink:href="#concentric" x="20" y="20" />
    <use xlink:href="#concentric" x="40" y="20" />
    <use xlink:href="#concentric" x="60" y="20" />
</svg>

【讨论】：

令人惊讶的是，我在几秒钟前通过粗略的实验发现了这一点。虽然很高兴让专家确认解决方案，但非常感谢！

我刚刚注意到你的解决方案和我的不同。这些是否相同：overflow="visible 和 overflow:"visible ？

SVG 将许多属性映射到样式，因此它们几乎相同，只是具有不同的 CSS 特异性，这不会影响此用例。