如何让<css transition =“”>为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：active：focus），而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

预期行为

当你悬停svg容器时，变量的值会发生变化，并且中风stroke-width 0会顺利地流入stroke-width 2 - 虽然已transition分配给transition但却没有<path> {1}}这可以在 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

之外，其他地方仍然无法正常工作

进行了研究后发现，这种行为是 bug 。

2018年3月11日，我在Windows 7下测试了浏览器，即：

1. Chrome 64.0.3282.186稳定（64位）
2. Chrome 67.0.3368.0 canary（64位）
3. Vivaldi 1.14.1077.55稳定（32位）
4. Opera 51.0.2830.55 stable（64 bit）
5. Microsoft Edge 41.16 16（取消定义）

  

不起作用且是错误

除外
1. Firefox版本60.0a1每晚（64位） 以旧版本 58.0.2（64位）



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

• Safari浏览器
• macOS
• 其他...