通过编辑和 或作为属性或通过 CSS 更改 SVG 的颜色 。
理论上很简单。
实践上,同一文件中可以声明一个颜色有三个位置,它们跟随正常的CSS级联,而如果你不知道,"我改变了填充而无事"变成了一个20分钟的调试会话.
以下是通常不会被拼出SVG色彩处理的部分.
填充和中风是独立的属性 每个形状都有内()和外(),独立设置:未设置默认为黑色.
取消默认为无。
如果一个图标是纯的,完全没有中风(大多数被转换的图标-font SVGs是),编辑就永远不会做任何能看得到的事情,这通常是第一个被命中的人.
级联是真正的bug source A颜色可以来自三个地方,它们没有同等的优先权: 演示属性:内出自属性:块或外出样式表: 正常CSS特异性适用:属性拍取样式表,样式表取出演示属性.
直接编辑属性,如果同一文件中其它区域的一个块也针对该路径,则您的编辑被覆盖,屏幕上没有任何变化.
没有错误,没有警告,它只是输了。
如果一个色彩编辑没有被粘住,在假设工具或编辑之前要粘贴的文件会损坏 。
这说明大多数的"SVG编辑器是buggy"报告其实是级联完全按照设计工作.
当前 Color: SVG 的继承花招 Set, 形状停止携带自己的颜色, 转而继承任何在祖先元素上设定的颜色, 相同的机制让文本继承颜色: 更改和 SVG 更新, 零编辑到 SVG 本身 。
这就是为什么大多数图标库默认的船:一个文件,无限颜色,完全由CSS在呼叫站点控制.
如果您正在发布自己的图标集, 这是要到达的属性 而不是硬编码的六进制值 。
真正让人惊讶的是: SVG以这种方式被引用的一瞬间,浏览器将它视为不透明的光栅相像.
没有DOM的进入,没有CSS的目标,并且因为没有跨越文件边界的继承途径而一无所获.
让你得到一个粗糙的近似 最多,不是真正的颜色交换。 3个实际修饰, 按其花费的顺序排列 : 在 HTML 中插入 SVG 。
一旦标出字面上标出一页,就是一个正常的元素,上面的每一个CSS把戏都奏效了.
用作口罩而不是来源: 外形成为了stencil,可见的颜色来自.,而你从不碰SVG文件.
在元素上设置填充, 假设源路径还没有硬码填充与您对战( 见上文级联部分, 这里同样适用规则) 。
多路径 SVG 需要多个编辑 双通标识很少是一个形状.
通常为四到五个元素,每个元素都携带自己的.
改变一个并期望整个图标改变,是继级联问题之后第二常见的Goncha.
要么:在每一个应该跟踪父母的文本颜色的路径上, 要么设定在包装上, 记住任何有自己清晰的童子路径仍然胜过组值 过去两到三条路径 当你在文本编辑器中用手做的时候, 这会很快地变得乏味, 一次一次地捕捉一个事件, 没有关于你实际所接触的形状的视觉反馈。
CSS自定义属性在SVG One变量内工作精细,每个共享它的形状都会引用.
如果SVG被内置(不是通过.加载),则页面的自有CSS可以直接覆盖该变量,给予多部分图形一个单一的外色钩,而不是分散于各行各业的重复的十六进制值.
做这个视觉SVG Lab是一个自由浏览器SVG编辑器,我建造了:视觉填充和中风编辑加上路径和节点编辑(bezier control points, socket management),没有安装.
它不能取代知道 级联是如何工作的, 它只是表示你点击 形状你想改变 而不是狩猎