应用笔划后的动态svg宽度/高度

Question

我制作了一个带有蒙版图像的svg并对面具应用了一个笔划：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%">
<defs>
    <g id="path">
        <path fill="#ffffff"
            d="m380.42 600l -235.11 123.61 44.9 -261.8 -190.21 -185.41 262.87 -38.2 117.56 -238.2 117.56 238.2 262.87 38.2 -190.21 185.41 44.9 261.8 z"/>
    </g>

    <mask id="image-mask">
        <use xlink:href="#path" overflow="visible"/>
    </mask>
</defs>

<use xlink:href="#path" overflow="visible" stroke="red" stroke-width="20"/>

<image width="781" height="744" xlink:href="cat3.jpg" mask="url(#image-mask)"/>

</svg>

不幸的是，部分笔划被切断了，结果是：

边框的顶部/左侧部分被切断。

有没有办法让它们可见而不用手动修改宽度/高度和viewBox？

Answer 1

就像其他人所说的那样，你可以将路径转移到远离SVG的边缘。另一种选择是使用此技术使用clipPath将笔划线“放在”形状内部而不是外部，这是导致线条从图形边缘被剪裁的原因（基于this answer }）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="781px" height="744px">
  <defs>

      <path fill-opacity="0" id="path"
          d="m380.42 600l -235.11 123.61 44.9 -261.8 -190.21 -185.41 262.87 -38.2 117.56 -238.2 117.56 238.2 262.87 38.2 -190.21 185.41 44.9 261.8 z"></path>

      <clipPath id="clip">
        <use xlink:href="#path" />
      </clipPath>
  </defs>

  <image width="781" height="744" xlink:href="cat3.jpg" clip-path="url(#clip)"/>
  <use xlink:href="#path" stroke="red" stroke-width="20" clip-path="url(#clip)"/>

</svg>

另请注意，我已将image元素带到use之前，以便在图像上绘制描边线，并将fill-opacity="0"应用于path，通过形状可以看到图像。