css - 如何使 为 external-svg-sprites 和 css-variable 工作？

Question

长话短说

已创建 symbol-svg-sprite并使用 svg+use 插入其片段, 我想用 css-variables在#ShadowDOM 中用于 SVG presentation 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

update As of September 2018, this still does not work everywhere except Firefox

经过研究，发现此行为是一个错误。

目前我在2018年3月11日在Windows 7下测试的浏览器，即:

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

Does not work and is an ERROR

除了

1. Firefox 版本 60.0a1 nightly(64 位) 和旧版本 58.0.2(64 位)

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

• Safari
• 苹果操作系统
• 其他...