Question

我有以下代码：

<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>

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

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

问题是，如果我使用<object>标记添加SVG，则第二个选择器active #circle不起作用。如果我把SVG内联，那么它的工作原理。请注意，我也将CSS包含在SVG文件中。我想使用<object>，因为真正的SVG并不是那么简单，所以我的HTML会变得混乱。有没有办法实现这个目标？

提前致谢，

Answer 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>

注意：我还认为您需要使用trg.innerHTML = ...作为对象来处理div

还考虑使用图像，但如果这实际上有效则没有尝试

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

CSS选择器特性与<object>中的SVG一起使用

1 个答案: