Question

我正在寻找在SVG中掩盖一条直线的一部分，实际上只能找出一种方法，但是宁愿选择另一种方法，因为线长将动态生成并且掩盖部分不会。

让我解释一下。

假设我有一行<path d="M0,0 L0,100" stroke="blue" stroke-width="20"/>，我想透明地屏蔽前10个像素，即d="M0,0 L0,10"部分。

我可以这样做，它会产生我想要的结果：

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200"  >
    <defs>
      <rect x="0" y="0" width="20" height="10" stroke="none"/>
      <mask id="chopmask" maskUnits="userSpaceOnUse">
        <rect width="20" height="90" x="0" y="10" fill="white"/>
      </mask>
    </defs>
    <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg>
</svg>

但是问题是，我似乎无法对rect中的mask做相反的处理，其中我只是将其定义为<rect width="20" height="10" x="0" y="0" fill="white"/>（仅注意{{1 }}和height不同。

我缺少关于如何定义10x20矩形并让其蒙版仅隐藏笔触路径一部分的信息吗？

Answer 1

如果我正确理解了这个问题，那么您需要以固定大小为10Х20的矩形形式放置一个遮罩，该遮罩将应用于具有可变长度的行。

在这种情况下，您可以尝试使用组合的遮罩，其中一部分将是不透明的fill = "black"，而第二部分将是透明的fill = "white"并显示该行的其余部分。

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200"  >
    <defs>
       <mask id="chopmask" maskUnits="userSpaceOnUse">
       <rect width="20" height="100" x="0" y="0" fill="white"/>
         <rect width="20" height="10" x="0" y="0" fill="black"/>
     </mask>
    </defs>
	      <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg> 
</svg>

使用矩形10 x 20px来使线屏蔽过程动画化的示例

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200"  >
    <defs>
      <rect x="0" y="0" width="20" height="10" stroke="none"/>
      <mask id="chopmask" maskUnits="userSpaceOnUse">
	    <rect width="20" height="100" x="0" y="0" fill="white"/>
         <rect width="20" height="10" x="0" y="0" fill="black">
		    <animate attributeName="y" dur="2s" values="-10;0" fill="freeze" />
		  </rect> 
     </mask>
    </defs>
	      <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg> 
</svg>

Answer 2

为我工作...我误会了你想做什么？

<svg width="100" height="100">
  <rect stroke="black" stroke-width="2" width="100" height="100" fill="yellow"/>
  <svg x="10" y="0" width="200" height="200"  >
    <defs>
      <rect x="0" y="0" width="20" height="10" stroke="none"/>
      <mask id="chopmask" maskUnits="userSpaceOnUse">
        <rect width="20" height="10" x="0" y="0" fill="white"/>
      </mask>
    </defs>
    <path d="M0,0 L0,100" mask="url(#chopmask)" stroke="blue" stroke-width="20"/>
  </svg>
</svg>

如何在SVG中掩盖部分描边路径？

2 个答案: