SVG形状堆栈，使shapeB绑定在shapeA内部，但shapeA填充在shapeB下方

我敢肯定，这要么是难以置信的简单，要么是要添加到我的SVG愿望列表中的令人失望的事情之一：

假设我有一个像这样的

rect

：

<rect x="0" y="0" height="500" width="800 fill="gold" stroke="red" stroke-width="16" />

---

我知道如果我把它作为一个问题写出来会更容易找到。解决方案（虽然不是我最喜欢的，也欢迎使用更好的）是使用

clipPath

元素。使用有关小提琴的例子：

<g>
    <clipPath id="frame">
        <rect x="6" y="6" 
              height="250" width="400" stroke-width="6"/>
    </clipPath>
</g>

<rect x="6" y="6" height="250" width="400" 
      fill="gold" stroke="red" stroke-width="6"/>
<circle cx="400" cy="0" r="125" fill="#c06" stroke="#930" stroke-width="6" 
            clip-path="url(#frame)"/>

诸如此类，我知道如果我把它作为一个问题写出来会更容易找到。解决方案（虽然不是我最喜欢的，也欢迎使用更好的）是使用
clipPath
元素。使用有关小提琴的例子：

<g>
    <clipPath id="frame">
        <rect x="6" y="6" 
              height="250" width="400" stroke-width="6"/>
    </clipPath>
</g>

<rect x="6" y="6" height="250" width="400" 
      fill="gold" stroke="red" stroke-width="6"/>
<circle cx="400" cy="0" r="125" fill="#c06" stroke="#930" stroke-width="6" 
            clip-path="url(#frame)"/>


像这样的话

<svg version="1.1">
<defs>
    <clipPath id="frame">
        <use xlink:href="#r"/>
    </clipPath>
</defs>

<rect id="r" x="6" y="6" height="250" width="400" 
      fill="gold" stroke="red" stroke-width="6"/>
<circle cx="400" cy="0" r="125" fill="#c06" stroke="#930" stroke-width="6" 
            clip-path="url(#frame)"/>
</svg>



对于第2部分，只需将笔划绘制为顶部的附加矩形

<svg version="1.1">
<defs>
    <clipPath id="frame">
        <use xlink:href="#r"/>
    </clipPath>
</defs>

<rect id="r2" x="6" y="6" height="250" width="400" 
      fill="gold"/>
<circle cx="400" cy="0" r="125" fill="#c06" stroke="#930" stroke-width="6" 
            clip-path="url(#frame)"/>
<rect id="r" x="6" y="6" height="250" width="400" 
      fill="none" stroke="red" stroke-width="6"/>
</svg>


像这样的话

<svg version="1.1">
<defs>
    <clipPath id="frame">
        <use xlink:href="#r"/>
    </clipPath>
</defs>

<rect id="r" x="6" y="6" height="250" width="400" 
      fill="gold" stroke="red" stroke-width="6"/>
<circle cx="400" cy="0" r="125" fill="#c06" stroke="#930" stroke-width="6" 
            clip-path="url(#frame)"/>
</svg>



对于第2部分，只需将笔划绘制为顶部的附加矩形

<svg version="1.1">
<defs>
    <clipPath id="frame">
        <use xlink:href="#r"/>
    </clipPath>
</defs>

<rect id="r2" x="6" y="6" height="250" width="400" 
      fill="gold"/>
<circle cx="400" cy="0" r="125" fill="#c06" stroke="#930" stroke-width="6" 
            clip-path="url(#frame)"/>
<rect id="r" x="6" y="6" height="250" width="400" 
      fill="none" stroke="red" stroke-width="6"/>
</svg>

一种不使用
的替代方法（因为你非常讨厌它们：）


一种不使用
的替代方法（因为你非常讨厌它们：）



您对此解决方案的哪些方面不满意？我更希望能够将剪辑路径设置为视口中的形状，而不必使用指定的
clipPath
元素单独定义它。我确信我可以定义它一次，然后通过
use
在两种上下文中重用它，但这实际上只是节省了字节，而我更愿意在语义上显示圆被剪裁（或加框）通过下矩形。您对此解决方案的哪些方面不满意？我更希望我可以将剪辑路径设置为视口中的形状，而不必使用指定的
clipPath
元素单独定义它。我确信我可以定义它一次，然后通过
use
在两种上下文中重用它，但这实际上只是节省了字节，而我更愿意在语义上显示圆被剪裁（或加框）通过下矩形。我认为溢出只能用于标记和模式？溢出作用于
元素，它是内部
元素的默认值，因此在这里实际上不需要。溢出属性在这里是必需的，因为我们使用它来实现剪切效果。我认为溢出只能用于标记和模式？溢出作用于
元素，它是内部
元素的默认值，因此在这里实际上不需要它。溢出属性在这里是必要的，因为我们使用它来实现剪切效果。这很聪明，很无礼。威尔，你和我妈妈说话了吗？我7岁时，她也这么说我。我一直忙着向我母亲解释为什么她需要停止使用表格布局和直接mysql插入。前几天她叫我“snarky”。我离题了。您的技巧非常简洁，除了SVG像往常一样倾向于将笔划的中心作为形状开始的位置，而不是内侧边缘之外，其他技巧都很有效。我本以为我会很聪明，在
剪贴簿上应用
比例（笔划宽度）
，但很快就被提醒，
比例
单位是百分比，而不是视图单位。关于如何可靠地将clipPath
rect
减少到内部区域，您有什么想法吗？（进一步警告，它也有圆角）。我怀疑您需要剪辑到自定义的矩形或路径。现在我们回到我的svg愿望列表。我走到前面，拿起圆形的长方形背景，把其他的东西都藏了起来；把它复制到正下方，去掉抚摸，设置一个不同的填充，这样我就可以发现哪些数字正好适合里面的边缘，所以看起来像烤面包上的黄油。发现这些数字（在某些地方基本上减去一半的笔划长度，在其他地方加上完整的笔划长度，等等），看起来很好，使我的阴蒂，当然…有一个轻微的发际线差距。我几乎要哭了，我只知道在那个该死的规范中有一些复杂的解决方案。这很聪明，以一种厚颜无耻的方式。威尔，你和我妈妈说话了吗？我7岁时，她也这么说我。我一直忙着向我母亲解释为什么她需要停止使用表格布局和直接mysql插入。前几天她叫我“snarky”。我离题了。您的技巧非常简洁，除了SVG像往常一样倾向于将笔划的中心作为形状开始的位置，而不是内侧边缘之外，其他技巧都很有效。我本以为我会很聪明，在
剪贴簿上应用
比例（笔划宽度）
，但很快就被提醒，
比例
单位是百分比，而不是视图单位。关于如何可靠地将clipPath
rect
减少到内部区域，您有什么想法吗？（进一步警告，它也有圆角）。我怀疑您需要剪辑到自定义的矩形或路径。现在我们回到我的svg愿望列表。我走到前面，拿起圆形的长方形背景，把其他的东西都藏了起来；把它复制到正下方，去掉抚摸，设置一个不同的填充，这样我就可以发现哪些数字正好适合里面的边缘，所以看起来像烤面包上的黄油。发现这些数字（在某些地方基本上减去一半的笔划长度，在其他地方加上完整的笔划长度，等等），看起来很好，使我的阴蒂，当然…有一个轻微的发际线差距。我几乎要哭了，我只知道在那个该死的规范里有一些复杂的解决方案。