栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用CSS设置外部SVG样式

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用CSS设置外部SVG样式

如果像引用

object
标签一样通过引用外部文件来包含svg图像,则svg图像中的元素将不包含在主文档DOM树中。他们组成了自己的树。因此,外部图像中的元素无法通过主文档中的CSS选择器进行匹配。

您可以

object
像大多数其他元素一样设置元素的样式,例如为其设置边框。但是您不能(至少这样)访问外部图像中的元素。在你的情况,你尝试风格
#ob
color
。这将适用于
object
s的文本颜色,而不适用于引用的svg图像内的任何颜色。在不支持svg的浏览器上,“您的浏览器不支持SVG”通知可能会显示为蓝色。

您的CSS选择器的情况与此

svg
类似:主文档中的CSS选择器仅与主文档中的元素匹配,没有
svg
找到,只是一个
object

有一些方法可以将CSS样式应用于svg元素。通常,此想法是通过从外部文件到主文档的svg元素或从主文档到外部文件的CSS,将CSS和svg元素置于同一DOM树中:

  1. 将您的
    svg
    元素及其子元素直接嵌入主文档中,而不是引用外部文件。在这种情况下,
    svg
    元素及其子元素将成为man文档的DOM树的一部分,因此主文档的CSS可以访问它们。
  2. svg
    元素嵌入到主文档中,并使用xlink
    use
    引用外部svg图像(而是其中的一部分)。
  3. 如果您无法将外部svg图像中的元素获取到主文档的DOM树中,因此主文档CSS选择器可以与之匹配,则可以尝试另一种方法:将CSS添加到svg文件中。与将CSS包含到html文档中的方式类似,您可以使用内联
    style
    属性,使用
    style
    html中的元素
    head
    或使用引用外部CSS文件
    <?xml-stylesheet ... ?>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/411522.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号