1

我很确定这要么非常简单，要么是添加到我的 SVG 愿望清单中的令人失望的事情之一：

假设我有一个rect这样的：

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

我也有一个`圈子，像这样：

<circle cx="800" cy="0" r="250" fill="#c06" stroke="#930" stroke-width="12" />

有点接近这个小提琴。

  1. 是否可以将 定义为circle在上方可见，rect但也可以将 定义rect为“可见区域”，circle以便circle在不与rect

  2. 如果这是可能的，是否还有可能（假设它不是默认行为）将“可见”区域定义为 的填充区域，rect以便笔画仍被视为在可见区域之外并且circle看起来在笔画下方但上面的填充rect（就像相框下的形状）？

4

3 回答 3

3

一种不使用 a 的替代方法<clipPath>（因为您非常讨厌它们:)

 <svg version="1.1">
    
        <rect x="6" y="6" height="250" width="400"
              fill="gold" stroke="red" stroke-width="6"/>         
        <svg x="6" y="6" height="250" width="400" overflow="hidden">
           <circle cx="394" cy="-6" r="125"
                   fill="#c06" stroke="#930" stroke-width="6"/>
        </svg>
    
    </svg>

于 2013-10-28T16:01:08.003 回答
2

那么像这样...

<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>
于 2013-10-28T15:29:29.807 回答
1

废话，知道如果我把它写成一个问题会更容易找到。解决方案（虽然不是我最喜欢的，欢迎更好的解决方案）是使用一个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)"/>
于 2013-10-28T14:43:39.960 回答