为什么我使用蒙版重新着色的彩色 SVG 会变成比所选颜色更浅的颜色？

Question

我有一个 VueJS 项目，我在其中使用具有硬编码颜色的 SVG，我尝试通过使用 mask 和 rect 标签循环遍历它们来为这些 SVG 赋予另一种颜色。这行得通，但我看到图标索引越高，图标的颜色就越浅。我做错了什么？

这是代码笔示例；

https://codepen.io/Kesselfest/pen/xxEZyBb

和HTML模板；

<template>
    <div id="app">
        <div class="flex-container">
            <div v-for="icon in icons" :key="icon.name">
                <div class="iconTile"> <svg viewBox="0 0 36 36">
                        <mask :id="`${icon.name}-mask`">
                            <image :href="icon.location" x="0" y="0" width="100%" height="100%" />
                        </mask>
                        <rect x="0" y="0" width="100%" height="100%" :fill="icon.color"
                            :mask="`url(#${icon.name}-mask)`" />
                    </svg> </div>
            </div>
        </div>
    </div>
</template>

Answer 1

如评论中所述，遮罩不是更改图标颜色的最佳方式。过滤器可以做得更好。我就是这样做的。对不起，如果我为了显示结果而放弃 Vue 语法，但我相信你可以轻松地将其移植回来。

滤镜首先用预期的颜色填充滤镜区域，然后使用 Porter-Duff atop 运算符将其父区域剪回图标的轮廓。

.flex-container {
  justify-content: space-around;
  display: flex;
  padding: 20px;
}

.iconTile {
  margin: 0;
  padding: 10px;
  width: 100px;
  height: 100px;
}

<div class="flex-container">
  <div class="iconTile">
    <svg viewBox="0 0 36 36">
      <filter
           id="checkmark-filter" >
        <feFlood
          flood-color="purple"
          result="color"
        />
        <feComposite
         operator="atop"
         in2="SourceGraphic"
         in="color"
        />
      </filter>
      <image
         href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Icons8_flat_checkmark.svg/768px-Icons8_flat_checkmark.svg.png"
         x="0"
         y="0"
         width="100%"
         height="100%"
         filter="url(#checkmark-filter)"
      />
    </svg>
  </div>
  <div class="iconTile">
    <svg viewBox="0 0 36 36">
      <filter
             id="pencil-filter" >
          <feFlood
            flood-color="green"
            result="color"
          />
          <feComposite
           operator="atop"
           in2="SourceGraphic"
           in="color"
          />
        </filter>
        <image
           href="https://upload.wikimedia.org/wikipedia/commons/5/57/Red_pencil.svg"
           x="0"
           y="0"
           width="100%"
           height="100%"
           filter="url(#pencil-filter)"
        />
      </svg>
  </div>
</div>

为什么我使用蒙版重新着色的彩色 SVG 会变成比所选颜色更浅的颜色？

Why does the colored SVG I recolor using a mask turns the color lighter than the chosen color?

html

css

svg

mask

rect