html页面中svg根元素的样式
html页面中svg根元素的样式
提问于 2016-10-08 16:10:33
在svg文档中，我可以为svg根元素分配背景颜色，如下所示：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink"
version="1.1"
width="100%" height="100%">
<style>
:root {
background: blue;
}
</style>
<circle cx="50%" cy="50% r="25%" fill="orange">
</svg>但是当svg插入到html页面中时:root引用的是html标记，而不是svg根元素。由于许多原因，我必须通过样式元素对svg根元素的背景进行样式化，因此，例如，我不能向svg元素添加style=的“背景:蓝色”属性，也不能使用javascript。有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-10-08 16:20:10
只需通过svg { ... }应用背景样式即可。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink"
version="1.1"
width="100%" height="100%">
<style>
svg {
background: blue;
}
</style>
<circle cx="50%" cy="50%" r="25%" fill="orange"/>
</svg>
还要注意:我已经修复了您破碎的<circle>元素。
Stack Overflow用户
发布于 2016-10-08 17:11:01
你真的需要嵌入<style>吗？
如果没有，只需创建两个类来对svg进行样式化，并在currentColor中使用CSS变量<circle>来使用CSS color属性更改其fill。
注意:因为SVG用XML定义了基于向量的图形，所以需要用
<circle>关闭/元素。
.svg__container {
background-color: blue;
width: 100%;
height: 100%;
}
.svg__circle {
color: orange;
}<svg class="svg__container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<circle class="svg__circle" cx="50%" cy="50%" r="25%" fill="currentColor" />
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39934525
复制相关文章
相似问题
腾讯云开发者
