应用描边后的动态 svg 宽度/高度答案

【问题标题】：Dynamic svg width/height after applying a stroke应用描边后的动态 svg 宽度/高度
【发布时间】：2018-09-06 19:34:46
【问题描述】：

我用蒙版图像制作了一个 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 的情况下使它们可见？

【问题讨论】：

你的形状比 svg 画布大。
不确定形状本身是否更大，但笔画大于形状，这就是它被切断的原因
所以修改viewBox或者平移形状（也可能修改viewBox）或者减小笔画宽度。

标签： svg

【解决方案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，以便可以通过形状看到图像.

【讨论】：