css 遮罩未应用于SVG< rect>

nbysray5 于 2023-04-13 发布在其他

关注(0)|答案(1)|浏览(99)

我想对html中的<rect>元素应用stripe模式，但看起来该模式没有被应用。

.green-class {
  fill: green;
  height: 40px;
  mask: url(#mask-stripe) !important
}

<svg class="availability-time-line-graphic" id="uptime-component-dbl6mg39xr0j" preserveAspectRatio="none" height="34" viewBox="150 0 298 34"><defs>
        <pattern id="pattern-stripe" width="4" height="4" patternunits="userSpaceOnUse" patterntransform="rotate(45)">
          <rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
        </pattern>
        <mask id="mask-stripe">
          <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)">
        </rect></mask>      
        </defs>
        <rect height="34" width="3" x="440" y="0" fill="#2fcc66" class="uptime-day component-dbl6mg39xr0j day-88 green-class" data-html="true"></rect>
        <rect height="34" width="3" x="445" y="0" fill="#2fcc66" class="uptime-day component-dbl6mg39xr0j day-89 green-class" data-html="true"></rect>
</svg>

css

来源：https://stackoverflow.com/questions/75962004/mask-not-applied-to-svg-rect

1条答案

按热度按时间

zwghvu4y1#

如果在<pattern>上设置viewBox属性，则更容易控制模式。
我还改变了<svg>上的viewBox以及<rect>的位置和大小。

.green-class {
  fill: green;
  mask: url(#mask-stripe) !important;
}

<svg height="200" viewBox="0 0 50 50">
  <defs>
    <pattern id="pattern-stripe" patternUnits="userSpaceOnUse"
    viewBox="0 0 20 20" width="10" height="10" patterntransform="rotate(45)">
      <rect width="10" height="20" fill="white"/>
    </pattern>
    <mask id="mask-stripe">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)"/>
    </mask>
  </defs>
  <rect height="50" width="50" class="green-class"/>
</svg>

赞(0）回复(0）举报 2023-04-13

我来回答

css 遮罩未应用于SVG< rect>

1条答案

相关问题

热门标签

最新问答