笔划可以用作SVG中的剪切路径的一部分吗? [英] Can strokes be used as part of clip-paths in SVGs?

问题描述

我正在编写MuPDF的SVG输出，并且遇到了SVG功能似乎受到限制的问题.我以为我想问一下，以防万一这是已知解决方法的已知问题(或者万一我做蠢事！)

I am in the middle of writing SVG output from MuPDF, and I've run up against what seems to be a limitation in the capabilities of SVG. I thought I'd ask here in case this was a known problem with a known workaround (or in case I'm doing something stupid!)

我有以下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>

这将绘制一条描边的路径(形状为蓝色的"[").然后将相同的路径设置为剪切路径，并以红色填充剪切路径.

This draws a stroked path (shaped like '[' in blue). Then it sets the same path to be a clipping path, and fills the clipping path in red.

我希望将剪切路径设置为该路径的描边版本，因此红色形状将完全覆盖蓝色形状.但是，在这里的测试中，路径的填充或笔触"被忽略，路径被填充"-因此，我在蓝色形状中绘制了一个红色正方形.

I was hoping that the clipping path would be set to the stroked version of the path, and hence the red shape would exactly overwrite the blue one. In my tests here however, the "fill or strokedness" of the path is ignored, and the path is "filled" - hence I get a red square drawn within the blue shape.

有没有一种方法可以实现我希望的行为?还是我必须在将路径输出到SVG之前编写代码来手动展平和描边路径?

Is there a way to get the behaviour I was hoping for? Or am I going to have to write code to manually flatten and stroke paths before outputting them to SVG?

在此先感谢您的答复！

推荐答案

svg中的剪切路径仅是形状，而不是形状的特征，因此换句话说，您将不会包含笔触.您可以做的是改用遮罩，将遮罩中路径的笔触设置为白色.

Clip-paths in svg are meant to be just the shape, not the traits of the shape, so in other words you'll not get the stroke included. What you can do is use a mask instead, setting the stroke of the path in the mask to white.

以下是示例:

<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中的剪切路径的一部分吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！