css SVG掩码路径被裁剪

bvuwiixz 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(161)

我试图建立一个跟随鼠标光标的动态链的javascript实验。
因此，我将使用SVG w，路径如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 240">
  <defs>
    <path id="a" d="M143 158q-31-139 9-99" fill="none" stroke-linecap="round"/>
    <mask id="b">
      <rect x="0%" y="0%" width="100%" height="100%" fill="#fff"/>
      <use href="#a" stroke-width="4" stroke-dasharray="6 14" stroke-dashoffset="7" stroke="#000"/>
    </mask>
  </defs>
  <use href="#a" stroke-width="8" stroke-dasharray="6 14" stroke-dashoffset="7" stroke="#333" stroke-opacity=".8" mask="url(#b)"/>
  <use href="#a" stroke-width="2" stroke-dasharray="12 8" stroke="#333" stroke-opacity=".8"/>
</svg>

不幸的是，链被裁剪：

为什么会这样呢？
您可以看到full experiment here（仅限桌面）。

css

来源：https://stackoverflow.com/questions/75282580/svg-mask-path-is-cropped

2条答案

按热度按时间

lnvxswe21#

长话短说：mask在对象的 * 定界框 * 内工作，但任何元素的定界框都不包括描边宽度。
因此，默认的mask使用其x、y、width、height和maskUnits属性在边界框周围添加10%的填充，这在大多数情况下都有效，但当元素很细并且几乎水平或垂直时，就会失败。
请参见下图：蓝色矩形是路径的边界框，绿色是mask执行任务的区域，可以看到一些路径向左和向右突出。

因此，您必须更改mask属性以使其适合您。例如，使其覆盖整个图像：

<mask id="b" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">

赞(0）回复(0）举报 2023-02-01

gc0ot86w2#

我通过添加maskUnits="userSpaceOnUse"修复了它
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/maskUnits
（更改了视图框，以便在SO片段中更好地显示）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 300 240">
  <defs>
    <path id="a" d="M143 158q-31-139 9-99" fill="none" stroke-linecap="round"/>
    <mask id="b"  maskUnits="userSpaceOnUse">
      <rect x="0%" y="0%" width="100%" height="100%" fill="#fff"/>
      <use href="#a" stroke-width="4" stroke-dasharray="6 14" stroke-dashoffset="7" stroke="#000"/>
    </mask>
  </defs>
  <use href="#a" stroke-width="8" stroke-dasharray="6 14" stroke-dashoffset="7" stroke="#333" stroke-opacity=".8" mask="url(#b)"/>
  <use href="#a" stroke-width="2" stroke-dasharray="12 8" stroke="#333" stroke-opacity=".8"/>
</svg>

赞(0）回复(0）举报 2023-02-01

我来回答

css SVG掩码路径被裁剪

2条答案

相关问题

热门标签

最新问答