相关疑难解决方法(0)

我正在尝试转换嵌入式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; …

我有类似这个问题:这里.

唯一的区别是我想要链接SVG的页面是一个外部页面,意思是:http://www.google.ca

目前在我的代码中,将链接更改为内部页面使css3转换工作,但将其链接到外部(http://)会覆盖我所做的css3转换.

如果有人有解决方法这个问题或之前处理过这个问题.请帮忙!

谢谢!

    code

编辑:忘了! JFIDDLE LINK