怎么做 为external-svg-sprites和css-variable工作？

Question

TL; DR

创建symbol-svg-sprite并使用svg+use插入其片段后，我想在#ShadowDOM中使用css-variables进行SVG presentation attributes更改例如stroke-width="0"中的stroke-width="5"，并且transition property必须正常工作，问题是stroke-width值在任何事件都有效（：hover：活跃：焦点）和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 blue
    --custom-duration 2500ms
    --custom-property all

Expected behavior

当你悬停svg容器时，变量的值发生变化，冲程stroke-width 0顺利流入stroke-width 2 - 这种情况发生但没有transition虽然transition分配给<path>这可以在DevTools中看到

这在哪里工作？

1. 内联svg通过标签<svg> - <svg> <path d="..."> </svg>
2. 使用标签<object></object>与外部css

可以在CodePen上看到演示

https://codepen.io/Cloudesign/pen/bLaEWg

---

如何让CSS transition为external-svg-sprites工作？我厌倦了打这个:(

Answer 1

更新截至2018年9月，除了Firefox之外，这仍然不起作用

进行了研究后发现，这种行为是一个错误。

在2018年3月11日的Windows 7浏览器测试中，即：

1. Chrome 64.0.3282.186稳定（64位）
2. Chrome 67.0.3368.0金丝雀（64位）
3. 维瓦尔第1.14.1077.55稳定（32位）
4. Opera 51.0.2830.55稳定（64位）
5. Microsoft Edge 41.16 16（取消定义）

不起作用，是一个错误

除了

1. Firefox版本60.0a1每晚（64位）和旧版本58.0.2（64位）

我将非常感谢那些补充以下工作状况信息的人：

• 苹果浏览器
• MACOS
• 其他...