这里是一个例子:
<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。但这似乎只能消除“填充”而不是中风。
答案 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>