小编Clo*_*ign的帖子

TL; 博士

symbol-svg-sprite使用创建并插入其片段后svg+use，我想css-variables在 #ShadowDOM 中使用 SVGpresentation attributes来更改例如stroke-width="0"在 中stroke-width="5"，并且transition property必须工作，问题是这些stroke-width值在任何事件（：悬停：活动：焦点）下都有效，transition但没有。

外部 SVG 示例

<svg style='display:none;' xmlns="http://www.w3.org/2000/svg">
    <symbol id='symbol-id' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 20">
        <path style='transition-duration: var(--custom-duration); transition-property: var(--custom-property);' stroke="var(--custom-stroke)" stroke-width="var(--custom-stroke-width)" fill="cyan" d="long..."
    </symbol>
</svg>

插入 SVG+USE

<svg>
    <use class="use-class" xlink:href="../transition-error.svg#symbol-id"></use>
</svg>

应用 CSS 样式

svg
    outline 1px solid black
    width 250px
    height 250px

.use-class
    --custom-stroke-width 0
    --custom-duration .5s
    --custom-property all

.use-class:hover
    --custom-stroke-width 2
    --custom-stroke …