使用CSS操作外部svg文件样式属性
我试图通过CSS操纵外部.svg文件.
HTML
<body>
<div class="mysvg">
<img src="decho.svg" alt="decho" width="200px"></img>
</div>
</body>
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开始标记之后.
<svg ...>
<style type="text/css" media="screen">
<![CDATA[
g {
fill: yellow;
stroke: black;
stroke-width: 1;
transition: fill 1s linear 0s;
}
g:hover {
fill: blue;
}
]]>
</style>
<g>
<path ...>
</g>
</svg>
你还需要object在html中插入它,否则它将无法工作.
<object data="decho.svg" type="image/svg+xml">
希望这有助于寻找未来像我一样的答案的人.这对我有帮助http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/.
Rob*_*bot 20
这在我看来是svg中最大的缺陷:沙盒.
Svg文件是沙箱:在他们自己的文档中,这就是典型的'fill:'样式不适用的原因.同样,您在svg中编写的CSS也不会适用于您网站的其他部分.
将css直接添加到svg:不是一个好的解决方案,因为你最终会在你使用的每个svg中重写css.
真正的解决方案: "图标系统".Svg font-face或svg sprites.在这里阅读更多相关信息.
不透明度起作用的原因:不透明度适用于svg对象/帧本身,而不是svg的内容(不可访问).
我还应该注意,无论你如何加载这些svg,内联,引用,作为背景的对象,你都无法进入沙箱.这就是为什么将它们转换为字体或使用精灵是使用悬停,焦点和其他效果/过渡所必需的原因.
- 这个答案不再是100%正确的。您可以通过“<symbol>”和“<use>”包含外部文件并设置其样式。请参阅[本·克鲁克的回答](/sf/answers/2776442021/)。 (2认同)
如果SVG本身没有定义填充颜色,并且CSS中不包含父选择器,则可以这样做.例如:
我有以下文件:
- icon-sprite.svg(我的SVG外部精灵)
- buttons.scss
- 的test.html
图标sprite.svg
为清楚起见,我省略了其他SVG.
<svg xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;">
<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" width="20px" height="20px">
<use xlink:href="icon-sprite.svg#icon-arrow-3pt-down"></use>
</svg>
</button>
buttons.scss
.svg {
fill: red;
}
如果我因阴影DOM边界而使用,这将无效body .svg.
有关详细信息,请参阅此CSS Tricks文章
- 当我在做的时候，SVG 不支持 `alt` 属性。另一种方法是：`role="img" aria-label="[title + description]"`。 (3认同)
我最近遇到了这个。虽然由于某些原因 SVG 不是 DOM 的一部分，但您可以使用一些 javascript将它们移动到 DOM ：
<object type="image/svg+xml" data="illustration.svg"
onload="this.parentNode.replaceChild(this.contentDocument.documentElement, this);">
</object>
<object>加载后，这将用内联替换。如果 javascript 被禁用，它会退回到<object>标签，并且 svg 将不会被主题化。就我而言，样式适用于 javascript 控制的深色主题，因此拥有正确的后备意味着没有主题问题。
考虑的其他选项（xlink 对于精灵来说是一个很好的选择）：
请注意，我不确定安全隐患，最好将其保存为您控制的文件。
| 归档时间： |
|
| 查看次数： |
18089 次 |
| 最近记录： |