如何使<CSS transition>为外部svg-精灵和css-变量工作？

Question

TL;DR

在创建了symbol-svg-sprite并使用svg+use插入了它的片段之后，我想在#ShadowDOM中使用css-variables对SVG presentation attributes进行更改(例如，stroke-width="5"中的stroke-width="0" )，而transition property必须工作，问题是stroke-width值在任何情况下都能工作(悬停: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，尽管分配给<path>的transition可以在DevTools中看到。

这个在哪里起作用？

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

在CodePen上可以看到演示

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

如何使CSS transition 为 external-svg-sprites**?**工作--我厌倦了这样的斗争：

Answer 1

截至2018年9月，更新，除了火狐之外，仍然不能在任何地方运行。

研究表明，该行为属于。

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

1. 铬64.0.3282.186稳定(64位)
2. 铬67.0.3368.0金丝雀(64位)
3. Vivaldi 1.14.1077.55稳定(32位)
4. Opera 51.0.2830.55稳定(64位)
5. Microsoft 41.16 (未定义)

不工作，是一个错误。

除…以外

1. 火狐版本60.0a1每晚(64位)和旧版本的58.0.2 (64位)

​

​

谨请补充以下文件中关于工作情况的资料：

• Safari
• macOS
• 其他人..。