将阴影 DOM 中的 SVG 路径设置为 visible:hidden

Question

是否可以在阴影 DOM 中设置一个 SVG 路径到 visible:hidden 或显示：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>

我正在尝试定位 class "bar-horizontal" 并在触发操作时隐藏它。

谢谢！

Answer 1

您无法访问 user-agent 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>

将阴影 DOM 中的 SVG 路径设置为 visible:hidden

Setting an SVG path in shadow DOM to visible:hidden

css

svg

shadow-dom