Html 如何使用外部 CSS 设置 SVG 样式

发布于12月22日

我有几个SVG图形，我想通过外部样式表修改它们的 colored颜色，而不是直接在每个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路径{}和.socIcon路径{}.

有些地方不对劲，可能我的实现不允许外部CSS修改，或者我错过了一个步骤？如果您能帮忙，我将不胜感激！我只需要能够通过我的外部样式表修改SVG图形的 colored颜色，但是我不能失go 工具提示和链接功能.(不过，我可能没有工具提示也可以生活.)谢谢!

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

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

Html 如何使用外部 CSS 设置 SVG 样式

推荐答案

Html相关问答推荐

为什么在Vuettify 3中使用Flex时会忽略宽度？

Xpath：提取标签之间的文本，但一旦出现嵌入标签就停止

如何在css中将包含多行文本的多个p-tag放在一起(并排)？

将输入字段下方的两个按钮设置为两侧对齐

选中/取消选中带有_hyperscript的多个复选框

如何通过扭曲元素来倾斜元素？

是否可以部分列出一个HTML有序列表

为什么在移动视图中，这个水平可滚动的表格会在表格的右侧显示额外的空间？

如何将CSS滤镜仅应用于背景图像

每个元素的CSS网格高度相等，以保持响应性

我希望创建一个对角手风琴与不同的内容(文本和图像)在其正常状态和其他元素悬停

类型'；联系人组件'；上不存在属性'；name FormControl'；

HTMLTag属性内的svelte+TS类型声明

Web 组件 #shadow-root css 泄漏到文档

网页爬虫：使用时光机器进行数据采集

不同屏幕尺寸的显示问题

如何在 blazor 中单击单个按钮调用 2 个等待任务

每次按下按钮时减小字体大小的 jquery 函数

CSS 网格自动高度不适用于特定网格区域

无法在 css 的 body 标签中正确呈现(内联显示)