css - 将 Shadow DOM 中的 SVG 路径设置为可见 :hidden

Question

是否可以将shadow DOM中的SVG路径设置为visible:hidden或display:none？

这是 defs 文件中的 SVG:

<symbol id="plus-minus" viewBox="0 0 16 16">
    <rect y="7" width="16" height="2" class="bar-horizontal"/>
    <rect x="7" width="2" height="16" class="bar-vertical"/>
</symbol>

这是带有 use 标签的 SVG:

<svg class="icon-plus-minus" aria-hidden="true">
    <use xlink:href="#plus-minus"></use>
</svg>

我试图定位“bar-horizo​​ntal”类并在触发操作时隐藏它。

谢谢!

Answer 1

您无法访问用户代理 Shadow DOM 的内容，而只能访问用户创建的内容。

因此，您必须定义 2 个符号，并应用样式 visibility:hidden到<use>元素代替。

<svg>
    <symbol id="plus-minus-h" viewBox="0 0 16 16">
        <rect y="7" width="16" height="2"/>
    </symbol>
    <symbol id="plus-minus-v" viewBox="0 0 16 16">
        <rect x="7" width="2" height="16" />
    </symbol>
</svg>
<svg class="icon-plus-minus" aria-hidden="true">
    <use xlink:href="#plus-minus-h" class="bar-horizontal"></use>
    <use xlink:href="#plus-minus-v" class="bar-vertical"></use>
</svg>