CODEWITHSUNDEEP
svgtransparency
Multifaceted.Abnormal
Multifaceted.Abnormal

Reputation: 21

Is there a way to ignore the transparent space of an SVG file?

The fiddle located here: JSFiddle shows my current issue. I have been trying for hours to find a way to get rid of the transparent pixels in the SVG but I haven't had any luck. I've tried adding an img tag to the div but that didn't work. I have searched on masking but it leads no where because I can get any of their examples to work. I've used image maps in the past but I can't find one that works with SVG files. Can anyone help me solve this problem?

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);
  }
}

Upvotes: 0

Views: 1206

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101860

As Kaido said, when you use an SVG as a background-image (or <image>), it will behave just as if it was a PNG.

You need to inline it, or embed it with <object>, and use an SVG filter.

Demo

#t1anchor svg path:hover {
  filter: url(#TPulse);
}

#t1anchor {
  background-color: transparent;
  left: 0;
  top: 50%;
  position: fixed;
}

#t1anchor svg {
  width: 124px;
  height: 168px;
}
<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>

Note: SVG-style animation, as we are using here, doesn't work in IE. If you want that, then you will need to use the FakeSmile library.

Upvotes: 2

Related Questions