为什么这个CSS转换不能在锚内的SVG上工作

yzuktlbb 于 2023-02-10 发布在其他

关注(0)|答案(4)|浏览(135)

我尝试转换一个嵌入式SVG对象的填充和路径，但似乎不起作用（Code Pen here）：

SVG：

<a class="simple-link svg-link" href="">
  Some Text
  <svg version="1.1" id="next-page-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve" preserveAspectRatio="xMinYMin meet">
    <circle class="the-background" cx="12.5" cy="12.5" r="12.5"/>
    <g>
      <path class="the-icon"  d="M16.088,11.421l-3.404,3.362l-3.418-3.362v-1.204l3.418,3.444l3.404-3.444V11.421z"/>
     </g>
  </svg>
</a>

大嘴巴

a
{
  width:200px;
  height:200px;
  overflow: hidden;

  @include transition(color, 1s);
  @include transition(background, 1s);

  svg
  {
    width:200px;
    height:200px;

    .the-background
    {
      @include transition(fill, 1s);
      fill: grey;
    }

    .the-icon
    {
      @include transition(fill, 2.5s);
    }
  }

  &:hover
  {
    color: red;
    background: black;
    .the-background
    {
      fill: black;
    }

    .the-icon
    {
      fill: red;
    } 

  }
}

为什么悬停时填充没有动画效果？

css

来源：https://stackoverflow.com/questions/22593883/why-doesnt-this-css-transition-work-on-svg-inside-an-anchor

4条答案

按热度按时间

e7arh2l61#

我解决这个问题的方法是把fill="currentColor"放在我想要转换的svg path元素上，然后我把color和transition属性添加到周围的anchor标签中，并在anchor标签上执行CSS转换，而不是在svg path本身上。
超文本：

<a>
    <svg>
        <path fill="currentColor" />
    </svg>
</a>

SCSS：

a { color: black; transition: color .2s linear;
    &:hover { color: white; } }

赞(0）回复(0）举报 2023-02-10

mwkjh3gx2#

转换不起作用的原因是它位于链接内。
要解决此问题，请将链接放在SVG中，而不是like this SO post suggests中
或
使SVG成为链接的同级并使用同级选择器

/* This goes within `a { ...` */
&:hover + svg { /* Or use ~ to select all */
  .the-background
  {
    fill: black;
  }

  .the-icon
  {
    fill: red;
  } 
}

赞(0）回复(0）举报 2023-02-10

qnakjoqk3#

我刚刚发现，为了在锚元素中转换svg填充，它只能使用rgba颜色代码。我还没有研究为什么会这样，但它在我的项目中起作用-这里有一个例子：http://rawesome.leveragenewagemedia.com/（悬停社交媒体图标）。
下面是我使用的SASS：

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: rgba(0,0,0,.2);
  -webkit-transition: fill .5s;
  -moz-transition: fill .5s;
  -ms-transition: fill .5s;
  -o-transition: fill .5s;
  transition: fill .5s;

  &:hover {
    fill: rgba(0,0,0,.5);
  }
}

赞(0）回复(0）举报 2023-02-10

acruukt94#

我不得不反驳这个答案，因为至少在这个时间点上，svg转换和动画在锚标记中不起作用的说法是不正确的。
工作示例：

<!doctype html>
<html>
    <body>
        <a>
            <svg width="100%" height="100%" viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
                <path d="M211.281,336.939C211.281,336.939 285.671,363.039 355.793,360.727C425.915,358.414 439.329,333.635 491.159,336.939C491.159,336.939 494.646,428.533 356.402,433.741C219.839,438.885 216.224,360.378 211.281,336.939Z" style="stroke:#000;stroke-width:46.14px;"/>
                <path d="M244.207,187.195C259.451,224.852 289.939,244.499 311.28,197.019" style="fill:none;stroke:#000;stroke-width:46.14px;"/>
                <path d="M383.841,219.954C406.402,233.327 447.866,257.844 461.89,198.78" style="fill:none;stroke:#000;stroke-width:46.14px;"/>
            </svg>
        </a>
    </body>
    <style>
    
        svg>path{
            transition: 1s;
        }
        svg path:nth-of-type(1){
            fill:#ffe7cb;
        }
        svg:hover>path:nth-of-type(1){
            d: path("M211.89,300C211.89,300 286.281,348.171 356.402,343.902C426.524,339.634 439.939,293.902 491.768,300C491.768,300 495.256,469.047 357.012,478.659C220.449,488.153 216.834,343.258 211.89,300Z");
            fill:white;
        }
        svg:hover>path:nth-of-type(2){
            d: path("M244.207,187.195C259.451,173.171 289.939,165.854 311.28,183.537");
        }
        svg:hover>path:nth-of-type(3){
            d: path("M383.841,187.195C406.402,179.878 447.866,166.463 461.89,198.78");
        }
        a{
            height: 300px;
            width: 400px;
            display: block;
        }
    </style>
</html>

赞(0）回复(0）举报 2023-02-10

我来回答

为什么这个CSS转换不能在锚内的SVG上工作

4条答案

相关问题

热门标签

最新问答