Question

我正在编写MuPDF的SVG输出，我遇到了SVG功能的限制。我想我会在这里问这是一个已知的解决方法已知的问题（或者我做了一些愚蠢的事情！）

我有以下SVG：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="21.59cm" height="27.94cm" viewBox="0 0 600 600">
<path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
<clipPath id="cp0">
<path stroke-width="12" fill="none" stroke="#000000" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
</clipPath>
<g clip-path="url(#cp0)">
<rect fill="#ff0000" x="0" y="0" width="600" height="600"/>
</g>
</svg>

这绘制了一条描边路径（形状像'['蓝色）。然后它将相同的路径设置为剪切路径，并以红色填充剪切路径。

我希望剪切路径设置为路径的描边版本，因此红色形状将完全覆盖蓝色形状。然而，在我的测试中，路径的“填充或描边”被忽略，路径被“填充” - 因此我得到一个蓝色形状内的红色正方形。

有没有办法获得我希望的行为？或者在将它们输出到SVG之前，我是否必须编写代码来手动压平和描边路径？

提前感谢您的回复！

Answer 1

svg中的剪辑路径只是形状，而不是形状的特征，换句话说，你不会得到笔画。您可以做的是使用遮罩，将遮罩中路径的笔划设置为白色。

这是an example：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600">
  <defs>
    <mask id="m0" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600">
      <path fill="none" stroke="white" stroke-width="5" d="M 150 300 L 80 300 L 80 370 L 150 370" />
    </mask>
  </defs>

  <path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
  <g mask="url(#m0)">
    <rect fill="yellow" x="0" y="0" width="600" height="600" />
  </g>
</svg>

笔画可以用作SVG中剪辑路径的一部分吗？

1 个答案: