Question

鉴于来自materialdesignicons.com的这个Twitter图标：

5*5*15 = 325

我发现我可以通过添加<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>这样的CSS类来更改路径的填充颜色：

social-icon

.social-icon {
    fill: red;
}

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

Answer 1

单独使用<path> / <svg>。基本上它是一个圆形的鸟“切出”，所以你可以着色的是没有鸟的圆圈。

你需要将路径分成背景圈和鸟类，如下所示：

<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>

使用CSS着色“反向”SVG路径

1 个答案: