在 SVG 使用实例中传递自定义属性

Question

在阅读了这篇概述如何为使用实例中的 svg 元素分配颜色的文章后，我想看看我是否可以使用该模式来应用到其他属性，如动画等。基本上是尝试为同一图标的不同实例设置动画不同的方式。

文章 https://medium.freecodecamp.org/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4

我创建用于测试的笔 https://codepen.io/asleepy/pen/PQWJVj

<svg xmlns="http://www.w3.org/2000/svg" class="defs-only">
<symbol viewBox="0 0 15 15" id="icon-radio">
    <circle id="circle-outer" cx="7.5" cy="7.5" r="6.5" 
                    fill="var(--outer-fill-color)" 
                    stroke="var(--outer-stroke-color)" />
    <circle id="circle-inner" cx="7.5" cy="7.5" r="4.5" 
                    fill="var(--inner-fill-color)" 
                    stroke="var(--inner-stroke-color)" />
</symbol>
</svg>

<svg viewBox="0 0 15 15" class="icon-radio one">
    <use xlink:href="#icon-radio" />
</svg>

<svg viewBox="0 0 15 15" class="icon-radio two">
    <use xlink:href="#icon-radio" />
</svg>
<style>
[class^='icon-'] {
    width: 3rem;
    transition-duration: 0.195s;
    transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
    transition-property: var(--inner-fill-color);
    will-change: var(--inner-fill-color);
    &:hover {
        --inner-fill-color: rgba(255, 255, 255, 0);
    }
}

#circle-outer {
    stroke-width: 2;
}

.one {
    --outer-fill-color: rgba(255, 255, 255, 0);
    --outer-stroke-color: rgba(210, 120, 150, 0.8);
    --inner-fill-color: rgba(123, 12, 34, 1);
    --inner-stroke-color: rgba(255, 255, 255, 0);
}

.two {
    --outer-fill-color: rgba(255, 255, 255, 0);
    --outer-stroke-color: rgba(23, 47, 26, 1);
    --inner-fill-color: rgba(4, 23, 69, 1);
    --inner-stroke-color: rgba(255, 255, 255, 0);
}
</style>

虽然动画不起作用。它只是跳转到结束状态，好像转换无效。

有谁知道如何做到这一点？

Answer 1

您在 use 元素上定义了过渡，但过渡不可继承。而是在引用圆的填充属性上定义它。

.icon-radio {
    width: 3rem;
}
.icon-radio:hover {
    cursor: pointer;
}

#circle-outer {
    stroke-width: 2;
}

#circle-inner {
    transition-duration: 0.195s;
    transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
    transition-property: fill;
    will-change: fill;
}

.one {
    --outer-fill-color: rgba(255, 255, 255, 0);
    --outer-stroke-color: rgba(210, 120, 150, 0.8);
    --inner-fill-color: rgba(123, 12, 34, 1);
    --inner-stroke-color: rgba(255, 255, 255, 0);
}
.one:hover {
    --inner-fill-color: rgba(255, 255, 255, 0);
}

.two {
    --outer-fill-color: rgba(255, 255, 255, 0);
    --outer-stroke-color: rgba(23, 47, 26, 1);
    --inner-fill-color: rgba(4, 23, 69, 1);
    --inner-stroke-color: rgba(255, 255, 255, 0);
}
.two:hover { /* to demonstrate different colors still can be used */
    --inner-fill-color: rgba(255, 255, 128, 1);
}

<svg xmlns="http://www.w3.org/2000/svg" class="defs-only">
<symbol viewBox="0 0 15 15" id="icon-radio">
    <circle id="circle-outer" cx="7.5" cy="7.5" r="6.5" 
                    fill="var(--outer-fill-color)" 
                    stroke="var(--outer-stroke-color)" />
    <circle id="circle-inner" cx="7.5" cy="7.5" r="4.5" 
                    fill="var(--inner-fill-color)" 
                    stroke="var(--inner-stroke-color)" />
</symbol>
</svg>

<svg viewBox="0 0 15 15" class="icon-radio one">
    <use xlink:href="#icon-radio" />
</svg>

<svg viewBox="0 0 15 15" class="icon-radio two">
    <use xlink:href="#icon-radio" />
</svg>