css - 怎么做适用于 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但可以在 DevTools中看到transition<path>

这在哪里工作？

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 位）

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

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