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

Posted 2023-03-06

【中文标题】如何使 <CSS 过渡> 适用于 external-svg-sprites 和 css-variable？

【英文标题】：How to make <CSS transition> work for external-svg-sprites and css-variable?

【发布时间】：2018-07-27 22:55:54

【问题描述】：

TL;DR

创建symbol-svg-sprite 并使用svg+use 插入其片段后，我想在#ShadowDOM for SVG presentation attributes 中使用css-variables 来更改例如stroke-width="5" 中的stroke-width="0"，并且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- 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

这在哪里起作用？

通过标签<svg> 内联svg — <svg> <path d="..."> </svg> 使用标签 <object></object> 和外部 css

可以在 CodePen 上看到演示

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

---

如何让CSS transition 为external-svg-sprites 工作？我已经厌倦了与此作斗争:(

【问题讨论】：

CSS 样式仅适用于它们所在的文档。因此应用的 CSS 样式需要在外部文档中。

我不太明白你为什么提到CSS-style，如果CSS-variables 渗透到<use> 并正常工作。 此外，只有transition 不起作用，其他所有CSS-variables 都起作用。在这里，那些不是，你能澄清你的答案吗？

codepen 适用于 firefox 58.0.2（64 位），不适用于 Microsoft Edge 41.16

【参考方案1】：

更新截至 2018 年 9 月，除了 Firefox 之外，这仍然不起作用

经过研究，发现这种行为是一个bug。

目前在2018年3月11日在Windows 7下经me浏览器测试，即：

Chrome 64.0.3282.186 稳定版（64 位） Chrome 67.0.3368.0 金丝雀（64 位） Vivaldi 1.14.1077.55 稳定版（32 位） Opera 51.0.2830.55 稳定版（64 位） Microsoft Edge 41.16 16（未定义）

不起作用并且是一个错误

除了

Firefox 版本 60.0a1 nightly（64 位） 和旧版本 58.0.2（64 位）

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

野生动物园 macOS 其他...