如何在SVG中剪出虚线?

时间:2018-06-20 21:17:04

标签: svg

这里是一个例子:

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100"/>
  <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="5" stroke-dasharray="5"/>
</svg>

https://codepen.io/anon/pen/oyqYKZ

我希望从直肠上剪掉红线,以便在直肠上有红色虚线的地方在直肠上应该有孔。

我尝试使用clipPath:https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking。但这似乎只能消除“填充”而不是中风。

1 个答案:

答案 0 :(得分:2)

您需要的是mask

对于口罩,颜色很重要。想象一下将mask元素的内容转换为灰度的情况。然后,白色将使蒙版内容具有完全不透明度,黑色零不透明度以及部分不透明度之间的灰色。空白区域视为黑色=透明。因此,蒙版必须包含白色背景,并且前景中必须包含黑色虚线。

<svg width="200" height="200">
  <mask id="dash">
    <rect width="100%" height="100%" fill="white"/>
    <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="5" stroke-dasharray="5"/>
  </mask>
  <rect x="50" y="50" width="100" height="100" mask="url(#dash)"/>
</svg>