使用CSS操作外部svg文件样式属性
mobiledu2502931467 发布于 2023-01-19 13:52我试图通过CSS操纵外部.svg文件.
HTML
CSS
div.mysvg img {
opacity: .3;
transition: opacity 1s linear 0s;
}
div.mysvg img:hover {
opacity: 1;
}
此代码适用于不透明度,但不适用于fill或其他svg特定属性stroke.我知道我不能用img标签这样做,但我一直在寻找几个小时,我找不到正确的方法来做svg或object.
所以基本上,我的问题是,我如何获得与我链接的代码相同的结果,但是能够操作填充,描边等属性并且它必须是外部文件,而不仅仅是粘贴在内部的内联svg代码HTML.
如果有人能够告诉我正确的方法,我会非常感激.谢谢.
编辑:
我设法通过在.svg文件中添加一个css来实现.它必须在svg开始标记之后.
你还需要object在html中插入它,否则它将无法工作.
希望这有助于寻找未来像我一样的答案的人.这对我有帮助http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/.
-
如果SVG本身没有定义填充颜色,并且CSS中不包含父选择器,则可以这样做.例如:
我有以下文件:
icon-sprite.svg(我的SVG外部精灵)
buttons.scss
的test.html
图标sprite.svg
为清楚起见,我省略了其他SVG.
<svg xmlns="http://www.w3.org/2000/svg" > <symbol viewBox="0 0 1500 828" id="icon-arrow-3pt-down"> <title>arrow-3pt-down</title> <path d="M1500 0H0l738.9 827.7z"/> </symbol> </svg>的test.html
<button class="button--large"> Large button <svg class="svg" > <use xlink:href="icon-sprite.svg#icon-arrow-3pt-down"></use> </svg> </button>buttons.scss
.svg { fill: red; }如果我因阴影DOM边界而使用,这将无效
body .svg.
有关详细信息,请参阅此CSS Tricks文章
2023-01-19 13:52 回答
信雨2502873867 -
这在我看来是svg中最大的缺陷:沙盒.
Svg文件是沙箱:在他们自己的文档中,这就是典型的'fill:'样式不适用的原因.同样,您在svg中编写的CSS也不会适用于您网站的其他部分.
将css直接添加到svg:不是一个好的解决方案,因为你最终会在你使用的每个svg中重写css.
真正的解决方案: "图标系统".Svg font-face或svg sprites.在这里阅读更多相关信息.
不透明度起作用的原因:不透明度适用于svg对象/帧本身,而不是svg的内容(不可访问).
我还应该注意,无论你如何加载这些svg,内联,引用,作为背景的对象,你都无法进入沙箱.这就是为什么将它们转换为字体或使用精灵是使用悬停,焦点和其他效果/过渡所必需的原因.
2023-01-19 13:54 回答
多米音乐_34396075
京公网安备 11010802041100号