通过与外部类名相关的CSS设置内联SVG填充颜色

基础概念

内联SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以直接嵌入到HTML文档中。CSS（Cascading Style Sheets）用于描述HTML文档的外观和格式。通过CSS设置内联SVG的填充颜色，可以实现对SVG图形的样式控制。

类型与应用场景

类型：可以通过类名、ID选择器等方式应用CSS样式。
应用场景：适用于需要动态改变颜色或样式的SVG图标、背景图案等。

示例代码

假设我们有一个内联SVG元素，并希望通过CSS设置其填充颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Fill Color Example</title>
    <style>
        .svg-fill-color {
            fill: #FF5733; /* 设置填充颜色 */
        }
    </style>
</head>
<body>
    <svg width="100" height="100" class="svg-fill-color">
        <circle cx="50" cy="50" r="40" />
    </svg>
</body>
</html>

在这个例子中，.svg-fill-color 类选择器用于设置SVG元素的填充颜色为 #FF5733。

遇到的问题及解决方法

问题1：CSS样式未生效

原因：

CSS选择器错误。
CSS文件未正确加载。
SVG元素未正确嵌入HTML。

解决方法：

检查CSS选择器是否正确。
确保CSS文件已正确链接到HTML文档。
确认SVG元素已正确嵌入HTML。

问题2：填充颜色无法动态改变

原因：

JavaScript未正确操作DOM。
CSS样式优先级问题。

解决方法：

使用JavaScript动态修改SVG元素的 fill 属性。
确保CSS样式的优先级足够高，可以使用 !important 提升优先级。

document.querySelector('.svg-fill-color').style.fill = '#33FF57';

总结

通过CSS设置内联SVG的填充颜色是一种高效且灵活的方法，适用于多种场景。遇到问题时，应检查选择器、文件加载和DOM操作等方面，确保样式正确应用。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

SVG精髓阅读笔记

在矢量图形系统中,图像被描述为一系列几何形状,矢量图形阅读器接受在指定坐标集上绘制形状的指令,而不是接受一系列已经计算好的像素.有人把矢量图形描述为一组绘图指令,而位图则是在特定的位置填充颜色的点....SVG作为图像,作为图像,作为CSS背景,作为对象,内联SVG SVG的坐标系统视口,文档使用的画布区域称为视口,单位可以em,默认字体大小,ex 字母x的高度,px像素,pt点pc12点cm厘米,...坐标,宽度和高度下面一行代码是在4厘米*5厘米的图纸上,设置每厘米16个单位的坐标系统 svg width=”4cm”height=”5cm” viewBox=”0 0 64 80”>svg>...属性viewBox的宽高比可以不同于视口的宽高比,在这种情况下SVG可以做三件事 1:按较小的尺寸等比例缩放图形,以使图形完全填充视口, 2:按较大的尺寸等比例缩放图形并裁剪掉超出视口的部分 3:拉伸和挤压绘图以使其恰好填充新的视口...Svg支持嵌套的坐标系统将一个svg元素插入到一个新的文档中 Svg中的基本形状线段笔画特性:stroke-width 笔画颜色stroke

1.4K2 0

将 SVG 与媒体查询结合使用

将 SVG 与媒体查询一起使用时，我们可以做类似的事情。除了将 CSS 与 HTML 结合使用外，我们还可以将 CSS 与 SVG 或Scalable Vector Graphics 结合使用。...通过将 CSS 与 SVG 结合使用，我们可以根据用户交互更改 SVG 的外观。或者我们可以在多个地方使用同一个 SVG 文档，并根据视口的宽度显示或隐藏它的一部分。...或者，正如我们将在下面看到的，我们可以使用 CSS 为 SVG 设置样式和动画。将 CSS 与 SVG 文档相关联将 CSS 与 SVG 结合使用与将其与 HTML 结合使用非常相似。...如果您使用的是内联 SVG，那么将与 HTML 相关的 CSS 和与 SVG 相关的 CSS 组合在同一个样式表中是非常好的。...通过调整它，我们可以确定 SVG 图像的哪一部分填充了视口。

6.2K0 0

SVG 从入门到后悔，怎么不早点学起来（图解版）

第二次接触就是在《CSS揭秘（图灵出品）》这本书，里面会讲到 SVG 相关的内容，而我选择了跳过这部分内容。。。之后是怎么学会的我也忘了。...属性样式内联样式内部样式外部样式属性样式直接在元素属性上设置样式，比如将矩形填充色改成粉红 svg width="400" height="400" style="border: 1px...常用样式设置 SVG 设置样式的属性和 CSS 稍微有点不同，但初学时不需要了解太深入，我们只需将常用的学会即可。比如填充色、描边颜色等。...~ 描边颜色 stroke 可以通过 stroke 属性设置描边的颜色，之前也使用过。...可以通过 dominant-baseline 属性设置文本垂直对齐方式 auto: 默认的对齐方式，保持与父元素相同的配置。

3.3K1 0

图标字体应用实践

使用图标字体可以完美解决上面的问题图标字体icon font 图标字体就是将图标作成一个字体，使用时与普通字体无异，可以设置字号大小、颜色、透明度等等，方便变化，最大优点是拥有字体的矢量无失真特点，同时可以兼容到...使用PS合并多个形状图层坑3：生成的SVG填充可能被置为none 有时候会遇到生成了svg，但是上传上去是空的，检查一下svg文件发现是fill被置为none了，如下所示： ?...然后，把所有使用图标字体的span/a标签都加一个.icon的类，.icon类设置font-family为font-face定义的字体名通过font face引入图标字体 CSS @font-face...借助jsp嵌套svg 这样做的缺点是浏览器没办法缓存，同时会阻碍页面的加载。优点是由于是内联的，可以直接用CSS控制svg的样式 2....> 使用的时候通过外链的办法将svg引到页面上，如要用到上面定义的logo，通过“文件名#ID”的方式：用svg的id加载相应的symbol XHTML <svgviewBox="0

2.3K2 0

SVG 入门指南(初学者入门必备)

矢量图形矢量图是基于数学的描述，如下图的多啦A梦，他的头是一条怎么样的贝塞尔曲线，它的参数是什么及用什么颜色来填充贝塞尔曲线，通过这种方式描述图片就是适量图。...通过 rgb() 形式指定的 rgb 颜色值，每个值的取值范围都是整数 0-255 或者百分比 0 - 100% currentColor 关键字，表示当前元素应用的 CSS 属性 color 的值。...color 是用来给 HTML 的文本设置颜色的，会被子元素继承，但对 SVG 没有直接效果。...：miter（尖的，默认值）、round（圆的）、bevel（平的） stroke-miterlimit 相交处显示宽度与线宽的最大比例，默认为4 填充颜色属性值 fill 指定填充颜色，默认值为...在 SVG 中使用样式在 SVG 的使用样式中 CSS 很相似，主要有 4 种，分别如下：内联样式内部样式表外部样式表表现属性内联样式用法跟 css 一样，如下所示： <line style

3.3K2 1

设计师使用SVG的必读文章

[图片] 但是，如果通过Sketch操作以上步骤，生成的SVG代码与一个健康SVG代码对比，是下图这样的：重点差别为：外框多了这样的重置样式。..." .a "," .b "的类名，是AI通过默认或用户自定的图层名称添加的，大量SVGicon以雪碧图的形式集合在一起，这些style就被打包在一起了。...同类名的样式就必然会发生互相污染；这类污染体现在IE9等低版本浏览器对SVG的读取上。故，针对需要SVG雪碧图合并的业务，选择内联样式的导出方式，更为安全健康。...[图片] 腾讯云业务就曾经在此处踩过坑，在IE9浏览器上使用SVG雪碧图，会出现大量的颜色尺寸错误，其原因就是有个别icon，在导出的时候，使用了内部CSS的方式。...来自不留名同学的实践经验补充： “在新版的AI 2018输出svg图标的时候，新增了通过另存为就可以导出SVG的方式，SVG的设置不会自动保存上次勾选的设置，每次都会回退成系统默认设置。”

5.7K6 1

SVG 入门指南(看完,对SVG结构不在陌生)

矢量图形矢量图是基于数学的描述，如下图的多啦A梦，他的头是一条怎么样的贝塞尔曲线，它的参数是什么及用什么颜色来填充贝塞尔曲线，通过这种方式描述图片就是适量图。...color 是用来给 HTML 的文本设置颜色的，会被子元素继承，但对 SVG 没有直接效果。...图形的棱角或一系列连线的形状：miter（尖的，默认值）、round（圆的）、bevel（平的） stroke-miterlimit 相交处显示宽度与线宽的最大比例，默认为4 填充颜色属性值 fill...在 SVG 中使用样式在 SVG 的使用样式中 CSS 很相似，主要有 4 种，分别如下：内联样式内部样式表外部样式表表现属性内联样式用法跟 css 一样，如下所示：的基础，而不是使用诸如 0 这样的简单数字房子的填充和笔画颜色由原始图形建立，并且不能通过元素覆盖，这说明咱们不能构造一行彩色的房子。

2.9K2 0

css学习--css基础

2.2内联元素在html中，span，a，label，strong，em就是内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display：inline将元素设置为内联元素。...2.3内联块状元素内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素（css2.1）img,input...，这条线你可以设置它的粗细、样式和颜色。...)中的颜色可设置为十六进制颜色，如：#888 border-width(边框宽度)中宽度也可以设置为：thin|medium|thick(不常用),最常用的是像素(px) 边框方向：如果想单独设置下边框...3.4盒模型填充元素内容与边框之间可以设置距离，叫做padding（填充）。填充也可以分上右下左。如下： div{padding:20px 10px 15px 30px;} 顺序不要搞错！

2.3K10 1

React组件设计实践总结03 - 样式的管理

解决的方向: 由工具来转换或创建类名 5️⃣ 常量共享常规的 CSS 很难做到在样式和 JS 之间共享变量, 例如自定义主题色, 通常通过内联样式来部分实现这种需求解决的方向: CSS-in-js...内联 CSS 不支持复杂的样式配置, 例如伪元素, 伪类, 动画定义, 媒体查询和媒体回退(对象不允许同名属性, 例如display: -webkit-flex; display: flex;) 内联样式通过...当然通过某些工具可以将静态的 object 提取出去不方便调试和阅读 … 所以内联 CSS 适合用于设置动态且比较简单的样式属性社区上有许多 CSS-in-js 方案是基于内联 CSS 的, 例如...学习对 CSS 相关技术进行选型决策社区上最流行的, 也是笔者觉得使用起来最舒服的是styled-components, styled-components 有下列特性: 自动生成类名, 解决 CSS...通过组件名来标志样式, 自动生成唯一的类名, 开发者不需要为元素定义类名. 绑定组件.

7.1K2 0

SVG

SVG画笔与填充边框色 - stroke属性这个属性使用设置的值画图形的边框，使用起来也很直接，把颜色值赋给它就可以了。注意：如果不提供stroke属性，则默认不绘制图形边框。...stroke-dashoffset 这个属性设置开始画虚线的位置填充色 - fill属性这个属性使用设置的颜色填充图形内部，使用很简单，直接把颜色值赋给这个属性就可以了。...这个属性定义了判断点是不是属于填充范围的算法；除了inherit这个值外，还有两个取值： nonzero：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向；计算结果从...evenodd：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的个数，个数为奇数则改点在图形内，需要填充；个数为偶数则点在图形外，不需要填充。...使用CSS展示数据当然，你也可以直接使用css来修改这些样式 SVG颜色的表示 SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke

5.7K4 0

CSS基础知识

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 css 样式由选择符和声明组成，而声明又由属性和值组成 ?...3.外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css ”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到...当然块状元素也可以通过代码display:inline 将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。...8-8 盒模型--填充元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。...，padding在边框里，margin在边框外。

1.3K2 0

从 Web 图标演进历史看最佳实践

字体可以轻易地使用 CSS 设置颜色。但我们可以看出，这个方案对使用者的工程能力已经有所要求。...4.1 内联 SVG SVG 的真正强大之处在于，当将其内联入 HTML 内容，那么它的文档模型将可以被该页面的 JS/CSS 访问和操作。...这为 web 图标开启了新的篇章：可以通过 CSS 控制图标的颜色甚至具体样式，使得受业务逻辑控制的动画图标成为可能。...由于我们希望图标组件内联到 HTML 以后可以通过 CSS 灵活修改颜色，所以对于常见的单色图标，我们需要去除所有硬编码的颜色，在有必要时设置为 currentColor。...在这一步我们通过 svgson 遍历 SVG 元素处理相关逻辑。编译。得到了优化过的图标数据，我们需要根据他们来生成我们的图标组件包。

1.7K1 0

【译】Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例

前端开发人员在构建网站时需要做出的决定之一就是添加图片的技术。它可以是HTML ，也可以是通过CSS背景生成的图片，也可以是SVG 。...原因是被视为替换元素，因此我们无法控制其加载的内容。 1.3 可访问性问题 HTML图片应该通过将 alt 属性设置为有意义的描述来访问，这对屏幕阅读器用户来说是非常有帮助的。...这比内联的CSS好一百万倍。...悬停时，形状和文本需要更改颜色。怎么做？对我来说最好的解决方案是使用内联SVG。... 上设置一个10%的黑色边框，我们可以确保边框与暗色图像融合，只有在图像颜色较浅的情况下，边框才会显现出来。

5.6K2 0

CSS

font-style：设置斜体 font-variant：英文文本大小写 font-weight：设置字体的粗细 font-size：设置字体大小颜色与背景属性 color：设置内容颜色...background-color：设置标签背景颜色 background-image：设置背景图案 background-repeat：设置背景图填充重复方式 background-position...a:link：设置链接为访问时的文本状态 a:visited：设置链接已经访问过的状态 a:hover：设置链接的鼠标激活状态边框属性有上下左右和颜色样式宽度各种搭配 border：没有设定方向和修饰属性就是四边加设置颜色宽度样式...margin外边距与padding内边距块元素与内联元素块元素：会独占一行，默认宽度是填充父元素的宽度，高度是内容的高度。...display:inline 块转内 display:inline-block 转成内联块，此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够浮动：通过设置浮动可以到达同行的效果不用去转内联块

9832 0

CSS变量（自定义属性）实践指南

例如，当你为项目中的主色调设置一个变量名--primary-color，那么你后面再修改这个主色调时，只需要改动一处，而不需要在不同位置的多个CSS文件中去手动修改多次值。...如何在SVG中使用CSS变量 CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式，以及和呈现相关的属性。举个例子，假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。...你可以把CSS变量的作用域限定在父容器中，然后给变量设置想要的颜色，那么里面的图标就会继承父容器的颜色值。...这时，如果你把同样的SVG图标放在不同的父容器中，并且在父容器上，给你的CSS变量设置各自的局部值，那么你就会得到不同颜色的图标，并且不用给你的样式表添加多余的规则。这很酷！...如何在@keyframes中使用CSS变量 CSS变量可以在CSS动画中使用，即可用于常规HTML元素，也可以用于内联的SVG。

1.4K1 0

Imooc之Html与CSS

就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。 lable的for与控件的id对应。...当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。...边界margin;边框border;填充podding; ---- 盒模型–填充元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。...，padding在边框里，margin在边框外。...语法：注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

6.8K2 0

前端-CSS变量（自定义属性）实践指南

例如，当你为项目中的主色调设置一个变量名--primary-color，那么你后面再修改这个主色调时，只需要改动一处，而不需要在不同位置的多个CSS文件中去手动修改多次值。...如何在SVG中使用CSS变量 CSS变量和SVG配合得很好。你可以使用CSS变量去修改SVG中的样式，以及和呈现相关的属性。举个例子，假设你想让你的SVG图标能跟随其所在父容器而拥有不同的颜色。...你可以把CSS变量的作用域限定在父容器中，然后给变量设置想要的颜色，那么里面的图标就会继承父容器的颜色值。...这时，如果你把同样的SVG图标放在不同的父容器中，并且在父容器上，给你的CSS变量设置各自的局部值，那么你就会得到不同颜色的图标，并且不用给你的样式表添加多余的规则。这很酷！...中使用CSS变量 CSS变量可以在CSS动画中使用，即可用于常规HTML元素，也可以用于内联的SVG。

1.8K2 0

神奇的CSS，几行代码就可以让照片变老照片的效果

旧照片看起来更集中在中心，但随后它们会退化，失去颜色并且边缘变得有点模糊。我们可以通过在 CSS 中应用遮罩来实现。不幸的是，并非所有浏览器都支持遮罩……对我们来说幸运的是，供应商前缀是！...请注意，这可能会根据背景颜色产生不同的结果！应用这四行CSS后，我们就实现了老照片的效果。这是原始图片与结果图片的比较：不错，但我们可以更进一步。...，而且我们在混合中添加了更多棕褐色（因此颜色组合得更多）：三、进一步添加混合内联 SVG 有些人会大声说道，说这“不是纯 CSS 解决方案”（我从来没有声称它是），并认为这部分是作弊。...对我们来说幸运的是，我们可以以一种相对直接的方式结合这两种技术。一种选择是在 HTML 中使用一些内联 SVG 并从我们的 CSS 中引用它。...我们将使用的另一个选项是直接在 CSS 中内联 SVG（不在 HTML 端添加任何内容）。

3.1K3 0

20个 CSS 快速提升技巧

设置SVG的格式就跟其他图片类型一样： .logo { background: url("logo.svg"); } 温馨提示：如果将SVG用在可交互的元素上比如说button，SVG...可以通过下面这个规则来确保SVG可以访问到（确保在HTML中已设置适当的aria属性） .no-svg .icon-only:after { content: attr(aria-label...; -o-box-decoration-break: clone; -webkit-box-decoration-break: clone;} 内联块声明允许将颜色、背景、页边距和填充应用于每行文本...级别来自于CSS变量，它允许您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。...你可能有一套颜色在整个项目中使用，以保持一致性。在CSS中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。

3.3K2 0

可视化初探上

HTML 和 CSS 作为浏览器渲染引擎的一部分，为了完成页面渲染的工作，除了绘制图形外，还要做很多额外的工作。...SVG 绘制图表与 HTML 和 CSS 绘制图表的方式差别不大，只不过是将 HTML 标签替换成 SVG 标签，运用了一些 SVG 支持的特殊属性。...为了实现更加复杂的效果，Canvas 还提供了非常丰富的设置和绘图 API，我们可以通过操作上下文，来改变填充和描边颜色，对画布进行几何变换，调用各种绘图指令，然后将绘制的图形输出到画布上。...总结获取 Canvas 对象，通过 getContext(‘2d’) 得到 2D 上下文;设置绘图状态，比如填充颜色 fillStyle，平移变换 translate 等等;调用 beginPath 指令开始绘制图形...另外，Canvas 还通过上下文设置状态属性，context.fillStyle 设置填充颜色，conext.font 设置元素的字体。

1.7K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

通过与外部类名相关的CSS设置内联SVG填充颜色

基础概念

相关优势

类型与应用场景

示例代码

遇到的问题及解决方法

问题1：CSS样式未生效

问题2：填充颜色无法动态改变

总结

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐