css - 使用 CSS 为 "inverted"SVG 路径着色

Question

鉴于此 Twitter 图标来自 materialdesignicons.com :

<svg class="social-icon" style="width:24px;height:24px" viewBox="0 0 24 24">
  <path d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
</svg>

我发现我可以通过添加一个 social-icon CSS 类来更改路径的填充颜色，如下所示:

.social-icon {
    fill: red;
}

<svg class="social-icon" style="width:24px;height:24px" viewBox="0 0 24 24">
  <path d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />
</svg>

是否可以“反转”路径着色，使 Twitter 鸟本身变成红色而不是周围的颜色？

Answer 1

不是那个<path>/<svg>独自的。基本上它是一个圆圈，上面有鸟 »cut out«，所以您只能给没有鸟的圆圈上色。

你需要像这样将路径分成背景圈和鸟:

<svg>
    <path
     d="M 12,2 A 10,10 0 0 1 22,12 10,10 0 0 1 12,22 10,10 0 0 1 2,12 10,10 0 0 1 12,2 Z" />
      <path
     style="fill:#ff0000"
     d="M 17.71,9.33 C 18.19,8.93 18.75,8.45 19,7.92 18.59,8.13 18.1,8.26 17.56,8.33 18.06,7.97 18.47,7.5 18.68,6.86 18.16,7.14 17.63,7.38 16.97,7.5 15.42,5.63 11.71,7.15 12.37,9.95 9.76,9.79 8.17,8.61 6.85,7.16 6.1,8.38 6.75,10.23 7.64,10.74 7.18,10.71 6.83,10.57 6.5,10.41 6.54,11.95 7.39,12.69 8.58,13.09 8.22,13.16 7.82,13.18 7.44,13.12 7.81,14.19 8.58,14.86 9.9,15 9,15.76 7.34,16.29 6,16.08 c 1.15,0.73 2.46,1.31 4.28,1.23 4.41,-0.2 7.36,-3.36 7.43,-7.98" />
</svg>