如何使 <CSS transition> 适用于 external-svg-sprites 和 css-variable？

Question

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 blue
    --custom-duration 2500ms
    --custom-property all

预期行为

当您将鼠标悬停在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 nightly（64 位） 和旧版本 58.0.2（64 位）

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

• 苹果浏览器
• 苹果系统
• 其他的...