前端之家

  1. 首页
  2. 问答

如何使用ObjectBoundingBox的坐标系应用蒙版的SVG模式

• 问答

我正在为数据可视化编写内联SVG代码，并且尝试将<mask>填充的<pattern>应用于多个SVG <rect>元素。

我找不到patternUnits，patternContentUnits，maskUnits和maskContentUnits的组合，该组合使遮罩填充了要应用的每个矩形的100％而没有拉伸模式。可能吗模式本身并不复杂，应该看起来像这样：correct pattern dimensions applied

由于性能优化，我不想将<defs>标签放在组件根目录下的单独svg中。

#my-defs {
  position: absolute;
  top: -1000px;
  left: -1000px;
}

#my-svg {
  width: 200px;
  height: 3em;
}

#my-svg rect {
  width: 100%;
  height: 80%;
}
<svg id="my-defs">
  <defs>
    <pattern id="diagonal-hatch-pattern" patternUnits="userSpaceonUse" width="4" height="4">
      <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" stroke="white" strokeWidth="1" />
    </pattern>
    <mask id="diagonal-hatch-mask" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
      <rect fill="url(#diagonal-hatch-pattern)" x="0" y="0" width="1" height="1" />
    </mask>
  </defs>
</svg>

<svg id="my-svg">
  <rect fill="steelblue" mask="url(#diagonal-hatch-mask)" />
</svg>

caiyuanqiang 回答：如何使用ObjectBoundingBox的坐标系应用蒙版的SVG模式

我可以通过将maskContentUnits改回其默认值userSpaceOnUse使其工作，但是由于我必须将静态尺寸分配给蒙版形状，因此感觉不对。如果蒙版中的rect可以缩放到蒙版所应用到的每个对象，那就更好了。

所以，如果有人有更好的解决方案，我将非常感激... 

#my-defs {
  position: absolute;
  top: -1000px;
  left: -1000px;
}

#my-svg {
  width: 200px;
  height: 3em;
}

#my-svg rect {
  width: 100%;
  height: 80%;
}
<svg id="my-defs">
  <defs>
    <pattern id="diagonal-hatch-pattern" patternUnits="userSpaceOnUse" width="4" height="4">
      <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" stroke="white" strokeWidth="1" />
    </pattern>
    <mask id="diagonal-hatch-mask" x="0" y="0" width="1" height="1" maskContentUnits="userSpaceOnUse">
      <rect fill="url(#diagonal-hatch-pattern)" x="0" y="0" width="9000" height="9000" />
    </mask>
  </defs>
</svg>

<svg id="my-svg">
  <rect fill="steelblue" mask="url(#diagonal-hatch-mask)" />
</svg>

htmlmasksvg
本文链接：https://www.f2er.com/3056365.html

大家都在问