主页 / 问题 / 951416
Accepted
Vladimir Gonchar
Asked:2020-03-02 20:19:32 +0000 UTC2020-03-02 20:19:32 +0000 UTC

通过使用 <img> 在 HTML 中加载的掩码更改 svg 图像的颜色

  • 772

我正在尝试将矩形剪辑到 SVG 蒙版。问题是矩形的高度是动态的（从 0px 到 32px），并且SVG 图像是从文件加载的（形状可以完全不同，由用户加载，没有办法硬加载他们的代码）。

我尝试将useinside svg with clipPath(and with overflow, too, and with changes) 一起使用 - 它不起作用，而且通常，use 仅适用于 sprites (?)：

<svg class="icon">
    <use xlink:href="/storage/uploads/default.svg"></use>
    <clipPath id="clipping">
        <rect style="position:relative;z-index:5;" width="32" fill="#78DE16" height="10"></rect>
    </clipPath>
</svg>

试图将 svg 作为 CSS 背景插入并挂起溢出：隐藏（以及 clipPath） - 无济于事。

什么是

<svg class="icon" style="background-image: url(/storage/uploads/default.svg);width: 32px;height: 32px;position: relative;overflow: hidden;">
        <rect style="position:relative;z-index:5;" width="32" fill="#78DE16" height="10"></rect>
</svg>

大概会发生什么（矩形不一定在底部，但如果可能的话......）：

在此处输入图像描述

如何才能做到这一点？

css

2 个回答

  1. 如何才能做到这一点？

    在此处输入图像描述

    如果这是您想要获得的输出，那么您不能从外部加载带有彩色矩形的 SVG 文件，不要弄乱掩码，clip-path使用命令use，这仍然需要解决样式问题。这并不容易。

    一切都可以变得更容易：

    有一种更通用的方法是如何以任何颜色在图形的一部分上进行绘制。

    您可以使用 SVG 过滤器

    <feFlood flood-color="#35B62E" /> <feOffset dy="20"> </feOffset>

    第一个过滤器提供所需颜色的阴影。
    第二个过滤器 使用属性dy="20"设置从填充开始的偏移量 

    <svg  version="1.1" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="filter1" x="0%" y="0%">
      <feFlood flood-color="#35B62E" />
      <feOffset  dy="20">
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
   </defs>
  <path  fill="black" d="m32 6 19 11-0.02 22-19 11-19-11 0.02-22z"  filter= "url(#filter1)" />
  
</svg>

    这样，您可以在任何形状上绘制，例如圆形，但这次我们将沿轴缩进X 

    <svg  version="1.1" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="filter1" x="0%" y="0%">
      <feFlood flood-color="#35B62E" />
      <feOffset  dx="16">
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
   </defs>
  <circle cx="32" cy="32" r="16" fill="black" filter="url(#filter1)" />
  
</svg>

    填充动画

    这也很简单，如果需要，可以制作一个填充动画。

    为此，您需要对属性dx或进行动画处理dy，这些属性负责从填充开始处的缩进。

    在下面的示例中，绘画在悬停时开始，并在光标离开时返回。 

    <svg  version="1.1" width="128" height="128" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="filter1" x="0%" y="0%">
      <feFlood flood-color="#35B62E" />
      <feOffset dy="0">
        <animate id="anim" attributeName="dy" values="0;20" dur="1s" begin="path1.mouseover" restart="whenNotActive" fill="freeze"/>  
	   <animate id="anim" attributeName="dy" values="20;0" dur="1s" begin="path1.mouseout" restart="whenNotActive" fill="freeze"/> 	
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
  
 </defs>
  <path id="path1"  fill="black" d="m32 6 19 11-0.02 22-19 11-19-11 0.02-22z"  filter= "url(#filter1)" stroke-width="1"/>

</svg>

    • 3
  2. Best Answer

    从外部来源添加图像

    图片可能完全不同，不可能为每场比赛静态注册。比如这个：i.imgur.com/B7tqOMS.png

    从外部源添加文件的最简单方法是使用标签<img>
    。但它将作为单独的对象和样式，在这种情况下掩码不起作用。但是您可以像第一个答案一样应用过滤器，然后您可以全部或部分以任何颜色重新着色图像。

    • 我把你的照片上传到服务器了。

    • 我将它添加到应用程序中<img>

    • 我用过滤器画它。

    这种技术也很有趣，因为它可以以base64通常方式不可用的格式设置 SVG 样式。

    img {
filter:url(#filter1);
}
    <img src="https://svg-art.ru/files/Face.svg" width="371" height="348" >

<svg  version="1.1" width="371" height="348" viewBox="0 0 371 348" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="filter1" x="0%" y="0%">
      <feFlood flood-color="#35B62E" />
      <feOffset  dy="150">
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
   </defs>
 
</svg>

    悬停时更改颜色的示例。

    使用了不同的滤镜属性值——dy=150并dy="65"实现了不同的颜色填充高度。

    img {
filter:url(#filter_G);
}

img:hover {
filter:url(#filter_R);
}
    <img src="https://svg-art.ru/files/Face.svg" width="371" height="348" >

<svg  version="1.1" width="371" height="348" viewBox="0 0 371 348" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <filter id="filter_G" x="0%" y="0%">
      <feFlood flood-color="#35B62E" />
      <feOffset  dy="150">
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter> 
	
  <filter id="filter_R" x="0%" y="0%">
      <feFlood flood-color="red" />
      <feOffset  dy="65">
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>	
   </defs>
 
</svg>

    • 2

相关问题