gpt4 book ai didi

html - 转向 SVG 图标——如何将它们与代码分开?

转载 作者:太空狗 更新时间:2023-10-29 14:39:57 30 4
gpt4 key购买 nike

SVG 图标与字体图标相比有一些优势:它们可以缩放以适应可变大小的容器元素,并且理论上您可以更改各个路径的颜色。我也喜欢我可以在 Inkscape 中轻松制作它们的事实:P

但我如何在 CSS 文件中移动 SVG,以便它们可以在同一页面上重复使用,如图标字体,并且仍然受益于这些优势?

background 属性支持 SVG,background: url(#svg_element),但这意味着我必须将 SVG 放在 HTML 中:|如果我将它作为“数据”字符串,我该如何更改同一个 css 文件中的路径颜色?

最佳答案

But how do I move the SVG in the CSS file so they can be reused on the same page, like icon fonts, and still benefit from these advantages?

使用 svg 模板

让我们创建一个 svg 模板。

模板 (html)

<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide">
<circle id="circle-tmp" cx="50" cy="50" r="50" />
</svg>

它是一个模板,所以我们隐藏它。 (但仍在 DOM 中)

.hide { display: none;}//css

使用 (html)

<svg viewBox="0 0 100 100" class="circle-first">
<use xlink:href="#circle-tmp" />
</svg>

这可以在页面的任何地方重复使用。

how do I change path colors in the same css file?

简单,只需设计样式即可!

CSS

.circle-first {
fill: #12bb34;
}

工作示例?给你:Fiddle

浏览器支持?不是 100% 确定,但所有大型浏览器都支持 svg:CanIUseIt

关于html - 转向 SVG 图标——如何将它们与代码分开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27954250/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com