如何在使用时更改 SVG 图案的颜色？答案

【问题标题】：How to change color of SVG pattern on usage?如何在使用时更改 SVG 图案的颜色？
【发布时间】：2017-09-11 09:48:45
【问题描述】：

我想在使用时改变图案的颜色。

例如，我想在红色描边的圆圈中有一个绿色图案。

<svg width="300" height="300" viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="checked" width="2" height="2" stroke="black" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
        patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2"></line>
      <line x1="0" y1="0" x2="2" y2="0"></line>
    </pattern>
  </defs>
  <circle cx="60" cy="60" r="50" stroke="red" fill="url(#checked)"/>
  <circle cx="120" cy="60" r="50" stroke="blue" fill="url(#checked)"/>
</svg>

http://codepen.io/anon/pen/RVNmRY

是否可以在不必为每种颜色创建新图案的情况下这样做？

我在评论中读到这可能使用过滤器 (https://stackoverflow.com/a/21427316/1981832)。但我不知道怎么做。

【问题讨论】：

每种颜色的图案有什么问题？
@RobertLongson 谢谢。在我的页面上，用户应该能够选择要绘制的颜色和图案。每种颜色都有一个图案意味着每次用户切换颜色时我都必须在页面上附加一个新图案。这对我来说似乎很麻烦。但也许我在这里忽略了一些东西。
将颜色名称放入模式 id（或数据属性）中，如果不存在则创建它。您可以在 CSS 中设置颜色并更新 CSS，但这会影响具有该模式的所有现有形状。
@RobertLongson：无法使用 CSS，因为没有它我需要支持独立的 SVG。如果我正确理解了 pattern-id 的想法，那么每次用户选择用新颜色绘制图案时，我都必须创建并附加一个新图案。是的，这可行，但看起来仍然很麻烦，并且会在 SVG 中添加大量代码，这些代码仅略有不同，即笔触颜色。
不确定你的意思，但独立 SVG 支持 CSS，只要你从独立文件本身链接到 CSS。

标签： svg colors svg-filters

【解决方案1】：

如果你用所需的颜色填充圆圈，然后将图案用作蒙版，它就会起作用。以下是绿色和洋红色的示例：

<svg width="300" height="300" viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg">
  <defs>  
    <pattern id="checked" width="2" height="2" stroke="white" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
        patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2"></line>
      <line x1="0" y1="0" x2="2" y2="0"></line>
    </pattern>
    <mask id="checked-mask" x="0" y="0" width="1" height="1" >
      <rect x="0" y="0" width="1000" height="1000" fill="url(#checked)" />
    </mask>
  </defs>  
  <circle cx="60" cy="60" r="50" stroke="red" mask="url(#checked-mask)" fill="green" />
  <circle cx="120" cy="60" r="50" stroke="blue" mask="url(#checked-mask)" fill="magenta" />
</svg>

【讨论】：

【解决方案2】：

以下是使用“蓝屏”技术使用过滤器为形状重新着色的方法。过滤器只留下红色分量（矩阵中的第一个 1），将蓝色转换为绿色（下一个“1”）并保持不透明度不变（最后一个“1”）。这个特定的过滤器显然只适用于您的示例，但您可以编写一个更通用的过滤器来使用特定的源颜色作为将转换为其他颜色的颜色。

<svg width="300" height="300" viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg">
  <defs>
  <filter id="blue-to-green">
     <feColorMatrix type="matrix" values="1 0 0 0 0
                                          0 0 1 0 0 
                                          0 0 0 0 0 
                                          0 0 0 1 0"/>
  </filter>
  
    <pattern id="checked" width="2" height="2" stroke="blue" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
        patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2"></line>
      <line x1="0" y1="0" x2="2" y2="0"></line>
    </pattern>
  </defs>
  
  <circle cx="60" cy="60" r="50" stroke="red" fill="url(#checked)" filter="url(#blue-to-green)"/>
  <circle cx="120" cy="60" r="50" stroke="blue" fill="url(#checked)"/>
</svg>

【讨论】：

谢谢。是的，就目前而言，必须为每种颜色添加一个过滤器。与必须为每种颜色添加图案相比，这并没有太大的改进。
是的，如果 SVG 有参数化过滤器会很棒，但可惜没有。