<object> 内带有 SVG 的 CSS 选择器特异性答案

【问题标题】：CSS selector specifity with SVG inside <object><object> 内带有 SVG 的 CSS 选择器特异性
【发布时间】：2016-04-01 04:10:28
【问题描述】：

我有以下代码：

<body class="active">
    <object data="css/svg/circle.svg" type="image/svg+xml">
        <p> Your browser doesn't support SVG.</p>
    </object>
</body>

SVG 很简单：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="../style.css" type="text/css"?>
<svg id="circle" height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<body> 上的 active 类是通过 javascript 切换的。然后我有以下 CSS：

#circle {
    opacity: 1;
}
.active #circle {
    opacity: 0.5;
}

问题是，如果我添加带有 <object> 标记的 SVG，第二个选择器 active #circle 将不起作用。如果我将 SVG 内联，那么它可以工作。请注意，我也在 SVG 文件中包含了 CSS。我想使用<object>，因为真正的 SVG 并不是那么简单，所以我的 html 会变得凌乱。有没有办法做到这一点？

提前致谢，

【问题讨论】：

“有没有办法做到这一点？” - 不是通过 CSS。 object 创建一个单独的“文档”，与 iframe 几乎相同。而且您也不能根据父页面的 body 元素具有的类选择“进入”iframe。
您是否尝试过使用<use> 元素？你会像这样使用它：<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="path/to/svg-file.svg#circle"></use></svg>.

标签： css svg css-selectors

【解决方案1】：

这里有一些你可以使用的方法

将 object 留空并使用 ajax 将其作为内联 svg 加载，在页面加载时...

HTML

<object data="" data-svg="path-2-image.svg" type="image/svg+xml">
    <p> Your browser doesn't support SVG.</p>
</object>

...或者为什么不放到一个普通的元素中，比如div

<div data-svg="path-2-image.svg">
</div>

脚本（概念）

<script>
    // on load/dom ready
    var trg = document.querySelector('[data-svg]');
    var svgpath = trg.getAttribute('data-svg');
    call-your-SVGloader-function(obj,svg);
</script>

注意：我还认为您需要像使用 div 一样对对象使用 trg.innerHTML = ...

也在考虑使用图像，但没有尝试过是否真的有效

<img src="path-2-image.svg" alt="">

【讨论】：