文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS:仅将mix-blend-mode属性应用于特定元素

问CSS:仅将mix-blend-mode属性应用于特定元素
EN

Stack Overflow用户

提问于 2017-11-09 21:28:31

回答 1查看 695关注 0票数 0

我想使用mix-blend-mode属性来使某些特定的SVG路径采用笔划上的背景图像，以便该路径看起来就像是一个擦除路径。下面的代码就是我所达到的。但是，正如您所看到的，mix-blend属性会影响其他路径，这些路径需要在笔划上显示没有任何背景图像。因此，我正在寻求一种方法，将mix-blend-mode属性仅应用于单独的元素组，并保持其他元素不受影响。

g.erasing image{
mix-blend-mode:  lighten;
}

<html>

<body>

  <svg height="400" width="450">
    <!-- this is the background image -->
    <image id="background" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>

      <g class="drawing">
         <!-- these are the drawing paths -->
         <path  d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" />
         <path  d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" />
         <path  d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" />
         <path  d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" />
      </g>


      <g class="erasing">  
          <!-- these are the erasing paths -->
         <path d="M 0 0 L 400 450" stroke="black" stroke-width="20"  />
         <path d="M 0 0 L 200 300" stroke="black" stroke-width="20"  />
         <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
      </g>

  </svg>

</body>
</html>

下面就是我想要的。

注意:我可以使用掩码来做这件事，但是在一些浏览器中它非常慢。

html

css

svg

image-masking

mix-blend-mode

回答 1

Stack Overflow用户

发布于 2017-11-09 22:21:05

您可以结合使用g元素和isolation: isolate;来指定mix-blend-mode效果下的元素。

circle{
  mix-blend-mode: lighten;
}
g{
  isolation: isolate;
}

<svg width="200px" height="200px">
  <rect width="100%" height="100%" fill="pink"/>
  <circle cx="100" cy="80" r="60" fill="red"/>
  <circle cx="70" cy="130" r="60" fill="green"/>
  <circle cx="130" cy="130" r="60" fill="blue"/>
</svg>
<svg width="200px" height="200px">
  <rect width="100%" height="100%" fill="pink"/>
  <g>
    <circle cx="100" cy="80" r="60" fill="red"/>
    <circle cx="70" cy="130" r="60" fill="#0f0"/>
    <circle cx="130" cy="130" r="60" fill="blue"/>
  </g>
</svg>

但在这种情况下，我认为您应该使用mask元素。

g.drawing{
  mask: url(#erasing);
}

<svg height="400" width="450">
  <!-- this is the background image -->
  <image id="background" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="400" height="450"></image>
  <g class="drawing">
     <!-- these are the drawing paths -->
     <path  d="M 100 350 l 150 -300" stroke="red" stroke-width="8" fill="none" />
     <path  d="M 250 50 l 150 300" stroke="red" stroke-width="8" fill="none" />
     <path  d="M 175 200 l 150 0" stroke="green" stroke-width="8" fill="none" />
     <path  d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="8" fill="none" />
  </g>
  <defs>
    <mask id="erasing">
      <rect width="100%" height="100%" fill="white"/>
      <!-- these are the erasing paths -->
      <path d="M 0 0 L 400 450" stroke="black" stroke-width="20"  />
      <path d="M 0 0 L 200 300" stroke="black" stroke-width="20"  />
    </mask>
  </defs>
</svg>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47203122

复制

相似问题

问CSS:仅将mix-blend-mode属性应用于特定元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:仅将mix-blend-mode属性应用于特定元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:仅将mix-blend-mode属性应用于特定元素
EN