Question

因此，我已将Instagram徽标的SVG版本嵌入到我的帐户中，并且我已设置规则以允许fill属性在:hover上转换。但是，过渡是拒绝为此特定图标工作。我在另一个SVG图标上设置了完全相同的规则，这个图标适用于Medium。过渡在那个过程中完美地运作，但却顽固地反对在Instagram上工作。这是标记和CSS。我的网站是使用Craft制作的，因此您可以在此处看到一些Twig。

<a href="{{ social.instagram }}" class="instagram" target="_blank">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="12px" height="12px" viewBox="6 345 512 512" xml:space="preserve" enable-background="new 6 345 512 512">
    <path class="st0" d="M268 394.5c67.3 0 75.2 0.3 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.7 11.8 4.6 20.2 10 29 18.8s14.3 17.2 18.8 29c3.4 8.9 7.6 22.2 8.7 46.8 1.2 26.6 1.5 34.5 1.5 101.8s-0.3 75.2-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8 -4.6 11.8-10 20.2-18.8 29s-17.2 14.3-29 18.8c-8.9 3.4-22.2 7.6-46.8 8.7 -26.6 1.2-34.5 1.5-101.8 1.5s-75.2-0.3-101.8-1.5c-24.6-1.1-37.9-5.2-46.8-8.7 -11.8-4.6-20.2-10-29-18.8s-14.3-17.2-18.8-29c-3.4-8.9-7.6-22.2-8.7-46.8 -1.2-26.6-1.5-34.5-1.5-101.8s0.3-75.2 1.5-101.8c1.1-24.6 5.2-37.9 8.7-46.8 4.6-11.8 10-20.2 18.8-29s17.2-14.3 29-18.8c8.9-3.4 22.2-7.6 46.8-8.7C192.8 394.7 200.7 394.5 268 394.5M268 349.1c-68.4 0-77 0.3-103.9 1.5 -26.8 1.2-45.1 5.5-61.1 11.7 -16.6 6.4-30.6 15.1-44.6 29.1S35.8 419.5 29.3 436c-6.2 16-10.5 34.3-11.7 61.2 -1.2 26.8-1.5 35.4-1.5 103.8s0.3 77 1.5 103.9c1.2 26.8 5.5 45.1 11.7 61.2 6.4 16.6 15.1 30.6 29.1 44.6s28.1 22.6 44.6 29.1c16 6.2 34.3 10.5 61.2 11.7s35.4 1.5 103.9 1.5 77-0.3 103.9-1.5c26.8-1.2 45.1-5.5 61.2-11.7 16.6-6.4 30.6-15.1 44.6-29.1s22.6-28.1 29.1-44.6c6.2-16 10.5-34.3 11.7-61.2s1.5-35.4 1.5-103.9 -0.3-77-1.5-103.9c-1.2-26.8-5.5-45.1-11.7-61.2 -6.4-16.6-15.1-30.6-29.1-44.6s-28.1-22.6-44.6-29.1c-16-6.2-34.3-10.5-61.2-11.7C345 349.4 336.4 349.1 268 349.1L268 349.1zM268 471.6c-71.4 0-129.4 57.9-129.4 129.4s58 129.4 129.4 129.4 129.4-58 129.4-129.4S339.4 471.6 268 471.6zM268 685c-46.4 0-84-37.6-84-84s37.6-84 84-84 84 37.6 84 84S314.4 685 268 685z"/>
    <circle class="st0" cx="402.5" cy="466.5" r="30.2"/>
  </svg>
</a>

这里是CSS：

.instagram .st0,
.medium svg path {
    transition: fill .3s ease-in;
    -moz-transition: fill .3s ease-in;
    -o-transition: fill .3s ease-in;
    -webkit-transition: fill .3s ease-in;
}

.instagram .st0 {
    fill: #333;
}

.medium .st0 {
    fill: #d0d2d3;
}

.medium .st1 {
    fill: #a6a8ab;
}

.medium .st2 {
    fill: #808184;
}

.medium .st3 {
    fill: #333;
}

.medium .st4 {
    fill: #939393;
}

.medium .st5 {
    fill: #231f20;
}

.instagram:hover .st0,
.medium:hover path {
    fill: #b29f77;
}

Also, here's where the site lives。所有代码都在那里。你们忍者的任何帮助都会很棒！

谢谢！

填写SVG过渡不起作用

0 个答案: