Question

位于此处的小提琴：JSFiddle显示我当前的问题。我一直试图找到摆脱SVG透明像素的方法，但我没有运气。我试过在div中添加一个img标签，但是没有用。我已经搜索了屏蔽，但它没有导致任何地方，因为我可以让他们的任何例子工作。我以前使用过图像映射，但找不到适用于SVG文件的图像。任何人都可以帮我解决这个问题吗？

HTML

<div id="t1">
  <div id="t1anchor" class="TPulse">
    <div id="t1inner"></div>
  </div>
</div>

CSS

#t1anchor:hover {
  -webkit-animation: TPulse 1s ease-in-out infinite;
  -moz-animation: TPulse 1s ease-in-out infinite;
  animation: TPulse 1s ease-in-out infinite;
}

#t1anchor {
  background-color: transparent;
  left: 0;
  top: 50%;
  width: 62px;
  height: 84px;
  position: fixed;
  background: url(http://m-a.no-ip.org/enter/tbr/images/twitterpull-right.svg) no-repeat;
  box-shadow: -10px -10px -10px rgba(24, 176, 236, 0.75);
}

@-webkit-keyframes TPulse {
  0% {
    box-shadow: -1px -1px 5px rgba(24, 176, 236, 0.50);
  }
  50% {
    box-shadow: -1px -1px 100px rgba(24, 176, 236, 1);
  }
  100% {
    box-shadow: -1px -1px 5px rgba(24, 176, 236, 0.50);
  }
}

@-moz-keyframes TPulse {
  0% {
    box-shadow: -1px -1px 5px rgba(24, 176, 236, 0.50);
  }
  50% {
    box-shadow: -1px -1px 100px rgba(24, 176, 236, 1);
  }
  100% {
    box-shadow: -1px -1px 5px rgba(24, 176, 236, 0.50);
  }
}

@keyframes TPulse {
  0% {
    box-shadow: -1px -1px 5px rgba(24, 176, 236, 0.50);
  }
  50% {
    box-shadow: -1px -1px 100px rgba(24, 176, 236, 1);
  }
  100% {
    box-shadow: -1px -1px 5px rgba(24, 176, 236, 0.50);
  }
}

Answer 1

正如Kaido所说，当您将SVG用作background-image（或<image>）时，它的行为就像是PNG一样。

您需要内联它，或将其嵌入<object>，并使用SVG过滤器。

<强>演示

＆＃13;

#t1anchor svg path:hover {
  filter: url(#TPulse);
}

#t1anchor {
  background-color: transparent;
  left: 0;
  top: 50%;
  position: fixed;
}

#t1anchor svg {
  width: 124px;
  height: 168px;
}

＆＃13;

<div id="t1">
  <div id="t1anchor" class="TPulse">
    <svg width="45pt" height="65pt" viewBox="0 -32.5 90 130" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet">
      <defs>
        <filter id="TPulse" x="-100%" y="-100%" width="300%" height="300%">
          <feFlood flood-color="#18b0ec" flood-opacity="0.5" result="shadowColor"/>
          <feGaussianBlur in="SourceAlpha" stdDeviation="20">
            <animate attributeType="XML" attributeName="stdDeviation" 
                     values="1; 20; 1" keyTimes="0; 0.5; 1"
                     dur="1s" repeatCount="indefinite" />
          </feGaussianBlur>
          <feOffset dx="-1" dy="-1" result="shadow"/>
          <feComposite in="shadowColor" in2="shadow" operator="in" />
          <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      <g id="#19b0ecff">
        <path fill="#19b0ec" opacity="1.00" d=" M 0.00 3.74 C 1.83 6.62 4.34 9.76 8.06 9.88 C 16.99 10.65 25.98 9.29 34.90 10.19 C 39.45 10.68 44.23 14.07 44.48 18.97 C 45.06 24.97 44.49 30.99 44.71 37.00 C 44.65 41.14 45.16 45.51 43.55 49.44 C 41.58 52.73 37.79 54.72 34.00 54.91 C 25.37 55.58 16.69 54.40 8.06 55.12 C 4.34 55.24 1.83 58.38 0.00 61.26 L 0.00 3.74 Z"/>
      </g>
    </svg>
  </div>
</div>

＆＃13;

注意：正如我们在这里使用的那样，SVG风格的动画在IE中不起作用。如果您需要，那么您将需要使用FakeSmile库。

有没有办法忽略SVG文件的透明空间？

1 个答案: