gpt4 book ai didi

html - 如何使用外部 CSS 设置 SVG 样式?

转载 作者:行者123 更新时间:2023-11-28 02:15:34 25 4
gpt4 key购买 nike

我有几个 SVG 图形,我想通过我的外部样式表修改它们的颜色 - 而不是直接在每个 SVG 文件中。我没有将图形放在行内,而是将它们存储在我的图像文件夹中并指向它们。

我以这种方式实现了它们以允许工具提示工作,并且我还将每个包装在 <a> 中标记以允许链接。

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>

下面是 SVG 图形的代码:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......./>
</g>
</svg>

我将以下内容放入我的外部 CSS 文件 (main.css):

.socIcon g {fill:red;}

但它对图形没有影响。我也试过.socIcon g path {}.socIcon path {} .

有些不对劲,也许我的实现不允许外部 CSS 修改,或者我错过了一步?非常感谢您的帮助!我只需要能够通过我的外部样式表修改 SVG 图形的颜色,但我不能失去工具提示和链接功能(虽然我可以在没有工具提示的情况下生活)。

最佳答案

如果 SVG 文件内联包含在 HTML 中,您的 main.css 文件只会对 SVG 的内容产生影响:

https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction

<html>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......."/>
</g>
</svg>
</html>

如果您想将 SVG 保存在文件中,则需要在 SVG 文件中定义 CSS。

您可以使用样式标签来实现:

http://www.w3.org/TR/SVG/styling.html#StyleElementExample

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="50px" height="50px" viewBox="0 0 50 50">
<defs>
<style type="text/css"><![CDATA[
.socIcon g {
fill:red;
}
]]></style>
</defs>
<g>
<path d="M28.44......./>
</g>
</svg>

您可以使用服务器端的工具根据事件样式更新样式标签。在 ruby​​ 中,您可以使用 Nokogiri 实现这一点。 SVG 就是 XML。因此可能有许多可用的 XML 库可以实现这一点。

如果您无法做到这一点,您将不得不像使用 PNG 一样使用它们;为每种样式创建一个集合,并内联保存它们的样式。

关于html - 如何使用外部 CSS 设置 SVG 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48495221/

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