如何在 html 中嵌入 svg 图标并更改其颜色？-解网

问：

如何在html中嵌入svg图标并使用css fill属性更改其颜色？

 <svg>
 <use xlink:href="assets/images/icon-reaction.svg"></use>
 </svg>

我尝试过这种方式，但没有奏效

<img src="assets/images/icon-reaction.svg">

html css 飒

目前，您无法通过引用完整的 svg 文件。但是您可以通过 ID 放置外部精灵图标并为其着色，如此处所述“如何使用<use>标签渲染外部 SVG 文件？但是，这种方法在渐变、蒙版或裁剪路径方面存在局限性。此方法不适用于元素。<use><img>

0赞 herrstrietzel 11/11/2023

这回答了你的问题吗？如何更改“svg”元素的颜色？

答：

1赞 Tim R 11/11/2023 #1

不能使用该属性更改外部文件的颜色。您可以将 SVG 信息放在页面上的任何位置（通常位于底部），然后在所需的位置使用该标记。fill<use>

svg {
  width: 4em;
  height: 4em;
  fill: navy;
  }

<svg><use href="#icon-timr"></use></svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-timr" viewBox="0 0 800 800">
    <g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)">
      <path d="M2345 6839 c-379-8-492-20-552-55-117-68-298-242-352-336-65-114-93-340-94-758-1-290 11-401 59-560 66-218 208-382 392-450 168-63 304-80 655-80 l277 0 0-957 c0-527 5-1118 10-1313 20-754 70-937 302-1097 176-122 288-157 493-156 169 1 254 20 394 89 77 38 110 62 176 128 70 69 90 98 140 196 32 63 59 116 60 118 2 2 61-44 132-103 218-181 383-277 603-348 189-62 312-82 505-81 193 1 283 18 410 79 290 140 482 507 502 960 10 229-16 393-104 660-57 175-65 252-33 345 12 35 68 161 124 280 139 289 156 348 176 585 13 163 13 860 0 1070-38 605-148 856-549 1255-382 380-560 456-1186 505-387 30-1718 43-2540 24z m2430-389 c295-21 416-52 644-166 179-88 295-169 404-283 101-105 168-204 256-382 71-143 106-241 143-399 19-83 22-124 23-320 0-200-3-237-23-328-71-317-206-567-421-783-135-134-241-208-436-305-150-74-206-122-225-194-14-53-6-93 32-152 59-94 239-200 428-254 250-70 386-189 406-356 17-145-102-336-251-404-195-89-439-64-734 77-501 238-752 673-751 1302 1 224 31 358 104 464 69 100 166 148 333 164 136 13 218 40 323 110 109 71 249 208 282 274 49 98 65 251 49 461-15 197-45 263-182 401-120 121-171 150-318 179-63 12-740 54-883 54 l-46 0-5-1427 c-4-1442-7-1579-43-1788-26-154-83-243-190-296-41-20-63-24-139-23-105 0-164 22-253 93-102 81-133 162-153 401-6 76-12 699-16 1578 l-5 1452-363 0 c-411 0-574 10-708 44-152 39-235 94-283 187-78 155-38 363 96 500 100 102 181 118 660 129 453 11 2061 4 2245-10z m-37-1868 c13-4 23-11 23-17 0-16-96-29-143-19-47 10-61 30-26 37 35 7 120 6 146-1z"></path>
    </g>
  </symbol>
</svg>

此方法在使用多个 SVG 时很常见，这样可以避免在页面加载时建立多个连接。其他 SVG 在同一标记中的其他标记中定义。<symbol><svg>

上一个：virsh begin-backup — 无法验证文档 .../domainbackup.rng

下一个：Wildfly 29 - War artifact 在远程虚拟机中不起作用，但在本地环境中可以

如何在 html 中嵌入 svg 图标并更改其颜色？

How i can embed a svg icon in html and change it color?

评论