Use element and injected SVG: Gradients not working in Chrome - html
I am using an svg spritesheet with symbols and inject it inline with SVGInjector. I reference it this way:
<svg role="img" width="134px" height="89px">
<use xlink:href="path/to/sprite.symbol.svg#theid"></use>
</svg>
The gradients are declared inside the defs tag of the spritesheet, but they are not showing in Chrome.
I noticed, that it works, if the SVG is not injected. That means, I just placed the whole thing inline into my HTML and the gradients showed as expected. The Spritesheet was exactly the same. The difference is just if it is loaded by JavaScript or not. But the symbol itself is showing. The problem is only the gradient.
This is a simplified version of my spritesheet, with one of the broken icons. In that case, the group called "quadri" is not displayed:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="20.0664" y1="12.1807" x2="20.0664" y2="19.5099">
<stop offset="0" style="stop-color:#00774A"/>
<stop offset="0.6" style="stop-color:#8CCAAE"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="20.0513" y1="10.627" x2="20.0513" y2="18.8625">
<stop offset="0" style="stop-color:#00975F"/>
<stop offset="0.3" style="stop-color:#8CCAAE"/>
<stop offset="0.55" style="stop-color:#00975F"/>
<stop offset="0.8352" style="stop-color:#00774A"/>
<stop offset="0.8691" style="stop-color:#007C4E"/>
<stop offset="0.9244" style="stop-color:#00895A"/>
<stop offset="0.9938" style="stop-color:#009E6E"/>
<stop offset="1" style="stop-color:#00A070"/>
</linearGradient>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="21.3755" y1="18.4082" x2="21.3755" y2="13.0789">
<stop offset="0" style="stop-color:#00A97C"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="18.0532" y1="18.4072" x2="18.0532" y2="13.0789">
<stop offset="0" style="stop-color:#00A97C"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="19.1021" y1="18.4072" x2="19.1021" y2="13.0799">
<stop offset="0" style="stop-color:#00A97C"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="19.9897" y1="18.4082" x2="19.9897" y2="13.079">
<stop offset="0" style="stop-color:#00A97C"/>
<stop offset="1" style="stop-color:#00975F"/>
</linearGradient>
</defs>
<symbol viewBox="0 0 66 33" id="theid">
<g id="Quadri">
<polygon fill="url(#SVGID_1_)" points="23.541,19.298 16.592,19.298 16.592,12.348 23.541,12.348 "/>
<path fill="url(#SVGID_2_)" d="M23.327,15.869c0,1.455,0.062,2.939,0.062,2.939c0,0.168-0.107,0.275-0.245,0.275h-6.016
c-0.138,0-0.229-0.122-0.245-0.275c0,0-0.168-1.271-0.168-3.199s0.168-2.847,0.168-2.847c0.016-0.153,0.107-0.275,0.245-0.275
h6.016c0.138,0,0.245,0.123,0.245,0.275C23.388,12.746,23.327,14.415,23.327,15.869z"/>
<g>
<g>
<path fill="url(#SVGID_3_)" d="M21.98,14.231c-0.429,0.245-0.551,0.26-1.026,0.551l0.031-0.061
c0.245-0.26,0.352-0.383,0.505-0.612c-0.428,0.031-1.056,0.077-1.5,0.168l0,0l0,0l0,0l0.031-0.046
c0.398-0.199,1.163-0.398,1.546-0.444c-0.092-0.138-0.857-0.551-1.041-0.628l0,0l0,0l0,0l0.016-0.046
c0.582,0.062,1.347,0.337,1.668,0.536c0.138-0.046,0.291-0.046,0.551-0.076c0,0-0.046,0.153-0.322,0.352l0,0l0,0l0,0
c0.077,0.184-0.092,1.24-0.245,1.515l0,0l0,0l0,0C22.194,15.012,22.148,14.46,21.98,14.231z"/>
<path fill="url(#SVGID_4_)" d="M18.842,17.981l0.015-0.046c-0.229-0.092-0.459-0.153-0.643-0.337l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.061-0.169,0.123-0.291,0.229-0.444l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.015-0.046c-0.199,0.03-0.367,0.107-0.536,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138-0.229-0.184-0.551-0.26-0.857
l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.031,0.352-0.046,0.597,0,0.873l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.138,0.046-0.26,0.046-0.383,0.092l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.184,0.107,0.321,0.199,0.536,0.291l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.107,0.229,0.229,0.397,0.413,0.581
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0.016-0.046c-0.031-0.138-0.077-0.244-0.062-0.397l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C18.398,17.936,18.597,17.966,18.842,17.981z"/>
<path fill="url(#SVGID_5_)" d="M19.485,14.491c0,0-0.092,0.168-0.168,0.382h-0.015l0,0l0,0c0.536,0.077,1.041,0.291,1.163,0.368
l-0.015,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.566-0.107-0.857-0.092-1.056-0.077l0,0l0,0l0,0
c-0.214,0.031-0.245,0.046-0.245,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.123,0.26-0.199,0.689-0.229,0.842l-0.016,0.046l0,0l0,0
l0,0l0,0l0,0l0,0l0,0c-0.107-0.245-0.245-0.735-0.245-0.735l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.275,0.153-0.918,0.75-0.918,0.75l0,0
l0,0l0,0l0,0l0,0l0,0l0,0c0.352-0.705,0.719-1.026,0.719-1.026l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.122-0.122-0.444-0.184-0.688-0.199l0,0l0,0l0,0l0.015-0.046c0.153-0.046,0.459-0.062,0.658-0.077l0,0l0,0l0,0l0,0l0,0l0,0
l0,0c0.245,0,0.383,0,0.383,0l0,0l0,0l0,0C19.041,14.66,19.362,14.506,19.485,14.491z"/>
<path fill="url(#SVGID_6_)" d="M20.158,17.537c-0.107,0.153-0.214,0.275-0.337,0.413l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.184,0.046-0.398,0.031-0.566,0.031
l-0.016,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0c0.123,0.061,0.245,0.106,0.383,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.107,0.092-0.245,0.168-0.352,0.245l-0.015,0.046l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.214-0.046,0.505-0.139,0.719-0.276l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.107,0,0.214,0,0.291-0.015l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.016-0.046c-0.016-0.046-0.062-0.077-0.077-0.153l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.199-0.153,0.337-0.291,0.505-0.459l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0.03-0.046c-0.168,0.106-0.367,0.275-0.551,0.367l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
C20.174,17.721,20.174,17.645,20.158,17.537z"/>
</g>
<g>
<path fill="#FFFFFF" d="M22.01,14.185c-0.428,0.245-0.566,0.26-1.025,0.551c0.275-0.291,0.367-0.413,0.536-0.673
c-0.429,0.015-1.056,0.077-1.5,0.168l0,0l0,0l0,0c0.383-0.214,1.163-0.444,1.562-0.49c-0.092-0.123-0.857-0.536-1.041-0.628l0,0
l0,0l0,0c0.597,0.046,1.347,0.275,1.699,0.49c0.138-0.046,0.291-0.046,0.551-0.076l0,0l0,0l0,0
c-0.061,0.107-0.077,0.184-0.321,0.352l0,0l0,0l0,0c0.077,0.184-0.092,1.24-0.245,1.515l0,0l0,0l0,0
C22.209,14.966,22.179,14.415,22.01,14.185z"/>
<path fill="#FFFFFF" d="M18.873,17.936c-0.245-0.092-0.429-0.199-0.612-0.383l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.061-0.169,0.123-0.291,0.229-0.444l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.199,0.03-0.352,0.046-0.521,0.092l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138-0.245-0.199-0.49-0.275-0.811l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0c-0.031,0.352-0.046,0.597,0,0.873l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.153,0.046-0.275,0.076-0.398,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.184,0.107,0.336,0.199,0.536,0.291l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.107,0.229,0.229,0.397,0.413,0.581l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.046-0.152-0.061-0.275-0.03-0.443l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C18.413,17.89,18.612,17.92,18.873,17.936z"/>
<path fill="#FFFFFF" d="M19.515,14.445L19.515,14.445L19.515,14.445L19.515,14.445L19.515,14.445
c-0.076,0.107-0.168,0.291-0.184,0.367l0,0l0,0l0,0c0.627,0.092,1.133,0.429,1.133,0.429l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.551-0.107-0.842-0.092-1.056-0.077l0,0l0,0l0,0c-0.199,0.015-0.245,0.046-0.245,0.046l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.153,0.321-0.245,0.888-0.245,0.888l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.092-0.245-0.245-0.734-0.245-0.734l0,0l0,0l0,0l0,0l0,0
l0,0l0,0c-0.275,0.153-0.918,0.75-0.918,0.75l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.352-0.705,0.72-1.026,0.72-1.026l0,0l0,0l0,0l0,0
l0,0l0,0l0,0c-0.123-0.122-0.444-0.184-0.689-0.199l0,0l0,0l0,0c0.123-0.046,0.444-0.107,0.689-0.123l0,0l0,0l0,0l0,0l0,0l0,0
l0,0c0.245,0,0.382,0,0.382,0l0,0l0,0l0,0C19.071,14.613,19.393,14.46,19.515,14.445z"/>
<path fill="#FFFFFF" d="M20.189,17.491c-0.107,0.153-0.214,0.275-0.337,0.413l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.214,0.062-0.383,0.077-0.597,0.077l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.122,0.061,0.245,0.106,0.382,0.138l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.138,0.122-0.245,0.198-0.382,0.291l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.214-0.047,0.505-0.139,0.719-0.276l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c0.107,0,0.214,0,0.291-0.015l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0c-0.015-0.062-0.03-0.107-0.046-0.199l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0c0.199-0.153,0.352-0.291,0.505-0.459l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
c-0.184,0.122-0.337,0.214-0.536,0.306l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0C20.189,17.675,20.189,17.599,20.189,17.491z"/>
</g>
</g>
</g>
<path d="M25.278,12.936c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022H26.4c0.55,0,1.133-0.176,1.133-0.66
c0-0.308-0.22-0.539-0.638-0.66c0.308-0.077,0.517-0.297,0.517-0.539c0-0.396-0.462-0.55-0.891-0.561h-1.243V12.936z M26.147,13.189
c0.473,0,0.649,0.099,0.649,0.352c0,0.066-0.022,0.132-0.066,0.176c-0.088,0.11-0.264,0.165-0.495,0.154h-0.011l-0.132,0.341h0.132
c0.264-0.011,0.484,0.077,0.594,0.22c0.055,0.066,0.077,0.143,0.077,0.22c0,0.264-0.231,0.407-0.693,0.407c-0.077,0-0.209,0-0.286,0
c-0.022-0.352-0.022-0.836-0.022-0.979c0-0.165,0.011-0.55,0.022-0.869C25.982,13.189,26.07,13.189,26.147,13.189z"/>
<path d="M30.129,12.914h-0.55l0.022,0.605c0.011,0.308,0.022,0.616,0.044,0.913l0,0l0,0c-0.033-0.088-0.066-0.143-0.231-0.385
c0-0.011-0.572-0.88-0.77-1.133v-0.011h-0.638v0.022c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.561
V15.29c-0.033-0.594-0.033-1.188-0.033-1.76l0,0c0.022,0.066,0.044,0.132,0.132,0.264c0.011,0.011,0.979,1.43,1.034,1.518
l0.011,0.011h0.451v-0.022c-0.033-0.308-0.033-1.034-0.033-1.243c0-0.231,0.011-0.869,0.033-1.122v-0.022H30.129z"/>
<path d="M30.789,12.936c0.022,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.671v-0.022
c-0.022-0.22-0.033-0.649-0.033-0.979c0.033,0,0.121,0.011,0.121,0.011h0.099c0.891,0,1.32-0.242,1.32-0.726
c0-0.561-0.605-0.693-1.111-0.704H30.8L30.789,12.936z M31.614,13.211c0.319,0,0.539,0.055,0.638,0.187
c0.044,0.066,0.077,0.132,0.077,0.22c0,0.352-0.396,0.429-0.726,0.429h-0.132c0,0-0.033,0-0.055-0.011c0-0.077,0-0.187,0-0.308
c0-0.154,0-0.33,0.011-0.495C31.46,13.211,31.537,13.211,31.614,13.211z"/>
<path d="M34.243,12.936c0.022,0.253,0.032,0.891,0.032,1.122c0,0.209,0,0.935-0.032,1.243v0.022h0.671v-0.022
c-0.021-0.22-0.033-0.649-0.033-0.979c0.033,0,0.121,0.011,0.121,0.011h0.1c0.891,0,1.319-0.242,1.319-0.726
c0-0.561-0.604-0.693-1.11-0.704h-1.057L34.243,12.936z M35.068,13.211c0.318,0,0.539,0.055,0.648,0.187
c0.045,0.066,0.077,0.132,0.077,0.22c0,0.352-0.396,0.429-0.726,0.429h-0.133c0,0-0.033,0-0.055-0.011c0-0.077,0-0.187,0-0.308
c0-0.154,0-0.33,0.012-0.495C34.914,13.211,34.991,13.211,35.068,13.211z"/>
<path d="M37.313,12.914L37.313,12.914l-0.012,0.011c-0.121,0.341-0.935,2.101-1.056,2.376l-0.011,0.033h0.582v-0.011
c0.056-0.165,0.111-0.352,0.188-0.55c0.021,0,0.473-0.011,0.473-0.011h0.396c0,0,0.066,0,0.088,0
c0.109,0.264,0.188,0.462,0.221,0.561v0.011h0.67l-1.078-2.42h-0.01H37.313z M37.477,13.629c0.056,0.11,0.188,0.44,0.353,0.825
c-0.022,0-0.056,0-0.056,0h-0.297c0,0-0.308,0-0.352-0.011C37.246,14.146,37.367,13.86,37.477,13.629z"/>
<path d="M39.105,12.936c0.021,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h0.67v-0.022
c-0.032-0.308-0.032-1.034-0.032-1.243c0-0.165,0.011-0.55,0.022-0.847C39.82,13.2,39.896,13.2,39.952,13.2
c0.319-0.011,0.539,0.055,0.638,0.187c0.044,0.055,0.077,0.132,0.077,0.22c0,0.275-0.265,0.418-0.506,0.429
c-0.077,0-0.144-0.011-0.144-0.011l-0.043-0.011l0.032,0.044c0.231,0.352,0.595,0.957,0.748,1.243v0.011h0.726l-0.021-0.033
c-0.021-0.044-0.495-0.737-0.693-1.034c0,0-0.011-0.011-0.011-0.022c0.363-0.11,0.55-0.319,0.55-0.638
c0-0.561-0.604-0.693-1.111-0.704h-1.055L39.105,12.936z"/>
<path d="M42.416,12.914h-0.648v0.022c0.021,0.253,0.032,0.891,0.032,1.122c0,0.209,0,0.935-0.032,1.243v0.022h0.67v-0.022
c-0.033-0.308-0.033-1.034-0.033-1.243c0-0.231,0.012-0.869,0.033-1.122v-0.022H42.416z"/>
<path d="M43.043,12.936c0.021,0.253,0.033,0.891,0.033,1.122c0,0.209,0,0.935-0.033,1.243v0.022h1.122
c0.55,0,1.133-0.176,1.133-0.66c0-0.308-0.22-0.539-0.638-0.66c0.308-0.077,0.518-0.297,0.518-0.539c0-0.396-0.463-0.55-0.892-0.561
h-1.243V12.936z M43.912,13.189L43.912,13.189c0.473,0,0.648,0.099,0.648,0.352c0,0.066-0.021,0.132-0.065,0.176
c-0.088,0.11-0.265,0.165-0.495,0.154h-0.012l-0.131,0.341h0.131c0.265-0.011,0.484,0.077,0.595,0.22
c0.056,0.066,0.077,0.143,0.077,0.22c0,0.264-0.23,0.407-0.693,0.407c-0.076,0-0.209,0-0.285,0
c-0.012-0.352-0.022-0.836-0.022-0.979c0-0.165,0.011-0.55,0.022-0.869C43.747,13.189,43.835,13.189,43.912,13.189z"/>
<path d="M46.959,12.914h-0.451v0.011c-0.132,0.363-0.99,2.222-1.056,2.376l-0.011,0.033h0.582v-0.011
c0.056-0.165,0.11-0.352,0.188-0.55c0.021,0,0.473-0.011,0.473-0.011l0.396,0.011c0,0,0.066,0,0.088,0
c0.1,0.264,0.176,0.462,0.221,0.561v0.011h0.67L46.959,12.914L46.959,12.914z M46.684,13.629c0.055,0.11,0.188,0.44,0.353,0.814
c-0.022,0-0.056,0-0.056,0h-0.297c0,0-0.308-0.011-0.352-0.011C46.453,14.135,46.574,13.86,46.684,13.629z"/>
<path d="M48.234,13.541c0,0.429,0.43,0.594,0.804,0.748c0.297,0.121,0.594,0.242,0.594,0.44c0,0.066-0.011,0.11-0.044,0.154
c-0.066,0.088-0.209,0.121-0.439,0.11c-0.221-0.011-0.474-0.088-0.76-0.209l-0.121-0.055v0.099v0.44l0.078,0.022l0.043,0.011
c0.143,0.033,0.407,0.099,0.682,0.099c0.716,0,1.134-0.286,1.134-0.748c0-0.44-0.44-0.616-0.825-0.77
c-0.286-0.11-0.583-0.231-0.583-0.418c0-0.055,0-0.22,0.363-0.22c0.274,0,0.538,0.11,0.682,0.176l0.144,0.055v-0.088v-0.44
l-0.133-0.022c-0.131-0.022-0.363-0.066-0.604-0.066C48.643,12.826,48.234,13.112,48.234,13.541z"/>
<path d="M26.323,16.379c0.506,0,1.1,0.143,1.1,0.693c0,0.308-0.176,0.517-0.539,0.627c0.055,0.099,0.627,0.979,0.726,1.066h-0.715
c-0.154-0.297-0.517-0.902-0.77-1.287c0.044,0.012,0.11,0.012,0.187,0.012c0.209,0,0.506-0.154,0.506-0.43
c0-0.34-0.418-0.407-0.627-0.407c-0.11,0-0.209,0.011-0.264,0.011c-0.011,0.297-0.022,0.671-0.022,0.836
c0,0.209,0,0.913,0.033,1.254h-0.66c0.033-0.33,0.044-0.759,0.044-1.254c0-0.418,0-0.913-0.033-1.133h1.034V16.379z"/>
<path d="M29.766,16.379v0.352c-0.33-0.033-0.66-0.033-1.001-0.033c-0.088,0-0.165,0-0.286,0.011
c-0.011,0.22-0.011,0.495-0.011,0.682l0.869-0.021v0.363l-0.88-0.022c0,0.209,0.011,0.506,0.022,0.759
c0.451-0.011,0.902-0.011,1.342-0.033v0.342H27.83c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.011-0.87-0.033-1.145H29.766z"/>
<path d="M31.548,16.379c0.088,0.242,0.88,1.991,1.067,2.387h-0.66c-0.033-0.109-0.121-0.308-0.22-0.561
c-0.132,0-0.275-0.012-0.473-0.012c-0.176,0-0.319,0-0.473,0.012c-0.077,0.197-0.132,0.385-0.187,0.561H30.03
c0.132-0.297,0.935-2.035,1.067-2.387H31.548z M31.603,17.887c-0.154-0.375-0.297-0.693-0.341-0.814
c-0.11,0.23-0.231,0.506-0.352,0.814c0.099,0,0.242,0.01,0.352,0.01C31.372,17.896,31.482,17.896,31.603,17.887z"/>
<path d="M34.684,18.766h-1.871c0.033-0.33,0.033-1.045,0.033-1.254c0-0.23-0.011-0.869-0.033-1.144h0.66
c-0.022,0.275-0.033,0.901-0.033,1.144c0,0.154,0,0.605,0.011,0.946h0.352c0.363,0,0.627-0.022,0.881-0.044V18.766z"/>
<path d="M37.73,16.379v0.352c-0.33-0.033-0.66-0.033-1.002-0.033c-0.088,0-0.164,0-0.285,0.011c-0.012,0.22-0.012,0.495-0.012,0.682
l0.869-0.021v0.363l-0.88-0.022c0,0.209,0.011,0.506,0.022,0.759c0.451-0.011,0.902-0.011,1.342-0.033v0.342h-1.991
c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.011-0.87-0.033-1.145H37.73z"/>
<path d="M39.139,16.335c0.297,0,0.561,0.044,0.736,0.088v0.528c-0.209-0.121-0.43-0.22-0.814-0.22c-0.34,0-0.363,0.121-0.363,0.22
c0,0.429,1.387,0.374,1.387,1.133c0,0.473-0.418,0.748-1.122,0.748c-0.319,0-0.604-0.055-0.792-0.121v-0.518
c0.43,0.199,0.693,0.275,0.936,0.275c0.274,0,0.406-0.076,0.406-0.253c0-0.473-1.386-0.396-1.386-1.198
C38.137,16.566,38.533,16.335,39.139,16.335z"/>
<path d="M42.383,16.379v0.352c-0.318-0.033-0.418-0.044-0.781-0.044c-0.011,0.286-0.011,0.67-0.011,0.836
c0,0.209,0,0.924,0.033,1.254h-0.671c0.033-0.33,0.044-1.045,0.044-1.254c0-0.166-0.011-0.55-0.022-0.836
c-0.363,0.011-0.461,0.011-0.781,0.044v-0.352H42.383z"/>
<path d="M43.67,16.379c0.088,0.242,0.88,1.991,1.066,2.387h-0.659c-0.033-0.109-0.121-0.308-0.22-0.561
c-0.133,0-0.275-0.012-0.474-0.012c-0.176,0-0.319,0-0.473,0.012c-0.077,0.197-0.132,0.385-0.187,0.561h-0.572
c0.132-0.297,0.935-2.035,1.066-2.387H43.67z M43.725,17.887c-0.154-0.375-0.297-0.693-0.341-0.814
c-0.11,0.23-0.231,0.506-0.353,0.814c0.1,0,0.242,0.01,0.353,0.01S43.615,17.896,43.725,17.887z"/>
<path d="M46.673,16.379v0.352c-0.319-0.033-0.418-0.044-0.78-0.044c-0.012,0.286-0.012,0.67-0.012,0.836
c0,0.209,0,0.924,0.033,1.254h-0.671c0.032-0.33,0.044-1.045,0.044-1.254c0-0.166-0.012-0.55-0.021-0.836
c-0.363,0.011-0.463,0.011-0.781,0.044v-0.352H46.673z"/>
<path d="M48.961,16.379v0.352c-0.33-0.033-0.66-0.033-1.001-0.033c-0.088,0-0.165,0-0.286,0.011
c-0.011,0.22-0.011,0.495-0.011,0.682l0.868-0.021v0.363l-0.879-0.022c0,0.209,0.011,0.506,0.021,0.759
c0.451-0.011,0.902-0.011,1.342-0.033v0.342h-1.99c0.033-0.33,0.033-1.045,0.033-1.254c0-0.231-0.012-0.87-0.033-1.145H48.961z"/>
</symbol>
</svg>
Edit: Clearified my question and updated it to my knowledge.
Related
SVG gradient passes gradient color to the next SVG
I have an issue with SVG icons. The first SVG icon passes its color to the next one like that: The second icon should have red gradient. Here's a snippet example: <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/> <path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/> <defs> <linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse"> <stop stop-color="#26A212" stop-opacity="0.4"/> <stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/> <stop offset="1" stop-color="#26A212"/> </linearGradient> </defs> </svg> <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/> <line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/> <line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/> <defs> <linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse"> <stop stop-color="#26A212" stop-opacity="0.4"/> <stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/> <stop offset="1" stop-color="#B81818"/> </linearGradient> </defs> </svg> When I remove the first icon, color of failure icon is red as expected: Here's a snippet example: <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/> <line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/> <line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/> <defs> <linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse"> <stop stop-color="#26A212" stop-opacity="0.4"/> <stop offset="0.0001" stop-color="#B81818" stop-opacity="0.47"/> <stop offset="1" stop-color="#B81818"/> </linearGradient> </defs> </svg> I use https://figma.com for creating icons and I export these icons as SVG. Do you have any idea what's wrong with this?
As per Danny '365CSI' Engelman. The id's was the same when we give each element this own unique id this is the result. Thanx Danny i also overlooked the id. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> </style> </head> <body> <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="64" cy="64" r="64" fill="url(#paint0_linear)"/> <path d="M31.7628 63.2679L59.7926 85.5881L98.3475 34.6986" stroke="white" stroke-width="18"/> <defs> <linearGradient id="paint0_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse"> <stop stop-color="#26A212" stop-opacity="0.4"/> <stop offset="0.0001" stop-color="#26A212" stop-opacity="0.47"/> <stop offset="1" stop-color="#26A212"/> </linearGradient> </defs> </svg> <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="64" cy="64" r="64" fill="url(#paint01_linear)"/> <line x1="35.636" y1="92.636" x2="92.636" y2="35.636" stroke="white" stroke-width="18"/> <line x1="35.364" y1="35.636" x2="92.364" y2="92.636" stroke="white" stroke-width="18"/> <defs> <linearGradient id="paint01_linear" x1="2.5" y1="-6.5" x2="101.5" y2="124.5" gradientUnits="userSpaceOnUse"> <stop stop-color="red" stop-opacity="0.4"/> <stop offset="0.0001" stop-color="red" stop-opacity="0.47"/> <stop offset="1" stop-color="red"/> </linearGradient> </defs> </svg> </body> </html>
How do I fill several svg path by one gradient?
There is an example with group of two paths, group filled by gradient. <svg height="1000" width="1400"> <defs> <linearGradient id="lingrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="green" /> </linearGradient> </defs> <g fill="url(#lingrad)"> <path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667 c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/> <path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64 c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667 V490.667z"/> </g> </svg> But each path is filled by its own gradient. How do I fill all paths by one shared gradient?
By just creating one path. Just add the d tag of one path to the d tag of the other path: <path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667 c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/> <path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64 c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667 V490.667z"/> <svg height="1000" width="1400"> <defs> <linearGradient id="lingrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="green" /> </linearGradient> </defs> <g fill="url(#lingrad)"> <path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667 c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667zM96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64 c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667 V490.667z"/> </g> </svg>
Define the gradient dimensions not relative to the object bounding box (of the individual shapes, gradientUnits="objectBoundingBox" is the default), but relative to the local coordinate system of the <g> element (gradientUnits="userSpaceOnUse"). <svg height="1000" width="1400"> <defs> <linearGradient id="lingrad" x1="0" y1="0" x2="512" y2="0" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="green" /> </linearGradient> </defs> <g fill="url(#lingrad)"> <path d="M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667 c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/> <path d="M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64 c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667 V490.667z"/> </g> </svg>
svg fill path animation issue
I'm working on svg animation and trying to make the letters filled just once. When they are filled, animation must stop. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve"> <linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0"> <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="1" stop-color="royalblue"> <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/> </stop> <stop offset="40%" stop-opacity="0" stop-color="royalblue"> <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/> </stop> <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> </linearGradient> <g id="preventive"> <g> <path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7 V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5 c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/> <path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9 c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8 c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/> <path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/> <path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/> <path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/> <path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/> <path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/> <path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/> <path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/> <path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/> </g> </g> </svg> I've used this exampl, but it doesn't work the way I want it to Here is my js fiddle Does anyone have any idea how I can get this to work?
If you don't want it to repeat then don't use repeatCount. If you want it to freeze as it is post animation use fill="freeze" I've also adjusted the values of the animation so the stop offsets just go from 0 to 1 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve"> <linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0"> <stop offset="0%" stop-opacity="1" stop-color="royalblue"/> <stop offset="40%" stop-opacity="1" stop-color="royalblue"> <animate attributeName="offset" values="0;1" dur="4s" begin="0s" fill="freeze"/> </stop> <stop offset="40%" stop-opacity="0" stop-color="royalblue"> <animate attributeName="offset" values="0;1" dur="4s" begin="0s fill="freeze"/> </stop> <stop offset="100%" stop-opacity="0" stop-color="royalblue"/> </linearGradient> <g id="preventive"> <g> <path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7 V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5 c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/> <path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9 c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8 c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/> <path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/> <path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/> <path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/> <path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/> <path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/> <path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/> <path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/> <path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/> </g> </g> </svg>
A colorful SVG in plain HTML is all black in React. Why?
I'm using React in Meteor.
When I add an SVG to the React component, style is not applied. But the very same code is working as expected in a plain HTML.
Here is my SVG code:
<svg viewBox="0 0 1031 475" preserveAspectRatio="none">
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient">
<stop stop-color="#00D7B9" offset="0%"/>
<stop stop-color="#B95DD7" offset="50%"/>
<stop stop-color="#FFB367" offset="100%"/>
</linearGradient>
</defs>
<path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
fill="url(#front-rainbow-gradient)" fill-opacity="0.65" />
</svg>
The React component:
render () {
return (
<div>
<div className="main-header">
<svg viewBox="0 0 1031 475" preserveAspectRatio="none">
<defs>
<linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient">
<stop stop-color="#00D7B9" offset="0%"/>
<stop stop-color="#B95DD7" offset="50%"/>
<stop stop-color="#FFB367" offset="100%"/>
</linearGradient>
</defs>
<path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z"
fill="url(#front-rainbow-gradient)" fill-opacity="0.65" />
</svg>
</div>
<div className="latest">
<Container />
</div>
</div>
)
}
classic camelCase. <stop stopColor="#00D7B9" offset="0%"/> <stop stopColor="#B95DD7" offset="50%"/> <stop stopColor="#FFB367" offset="100%"/> (mind that react expects camel case properties)
How do I animate steam from a coffee cup in my SVG icon code?
I'm a graphic designer just learning about SVG animated icons and coding. I have illustrated a cup of coffee in illustrator then exported it as an SVG file. I am trying to animate the steam so that it rises like real steam. The problem is that it's not animating the steam even if I have .steam1 .st1 selected in CSS. I might just be really confused from the amount of tutorials I've been looking at. Could someone look at my HTML code for the illustration and help me properly animate it using CSS based off of this code http://codepen.io/anon/pen/DLmCn
Here is my SVG code in HTML http://codepen.io/anon/pen/niHCA
<body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="icon"
width="284px" height="284px" viewBox="0 0 64 64"
style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#49331B;}
.st1{fill:#E6E7E8;}
.st2{opacity:0.8;fill:url(#SVGID_4_);}
.st3{opacity:0.8;fill:url(#SVGID_5_);}
.st4{fill:#F3E8C3;stroke:#F3E8C3;stroke-width:0.9486;stroke-miterlimit:10;}
.st5{fill:none;stroke:#FFFFFF;stroke-width:0.4743;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st6{fill:#F3E8C3;}
.st7{fill:#F4EFE9;}
.st8{fill:#F79F63;}
.st9{fill:url(#SVGID_1_);}
.st10{fill:url(#SVGID_3_);}
.st11{opacity:0.7;}
.st12{fill:#307BA5;}
.st13{fill:#328AC6;}
.st14{fill:none;stroke:#E2D5B7;stroke-width:0.9486;stroke-miterlimit:10;}
.st15{opacity:0.5;fill:url(#SVGID_2_);}
.st16{opacity:0.5;fill:url(#SVGID_6_);}
.st17{fill:#77593D;}
]]>
</style>
<rect x="0.1" class="st8" width="64" height="64"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="10.5957" y1="55.7451" x2="45.3627" y2="53.0889">
<stop offset="0" style="stop-color:#F79F63"/>
<stop offset="5.723715e-03" style="stop-color:#F49E63"/>
<stop offset="0.1092" style="stop-color:#D88B57"/>
<stop offset="0.2279" style="stop-color:#C77F4F"/>
<stop offset="0.3712" style="stop-color:#BB7849"/>
<stop offset="0.5626" style="stop-color:#B47347"/>
<stop offset="1" style="stop-color:#B27246"/>
</linearGradient>
<path class="st9" d="M45.4,54.4c0-0.4-0.3-0.9-0.8-1.3c-2.2-1.7-8.8-2.9-16.6-2.9c-9.6,0-17.4,1.8-17.4,4.1c0,2.3,7.8,4.1,17.4,4.1
C37.6,58.5,45.4,56.7,45.4,54.4z"/>
<path class="st6" d="M43.8,32.9c3.5,0,6.4,3,6.4,6.7s-2.9,6.7-6.4,6.7 M44,49.9c5.4,0,9.8-4.6,9.8-10.3S49.4,29.2,44,29.2"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="43.7656" y1="39.6279" x2="51.1113" y2="39.6279">
<stop offset="0" style="stop-color:#F3E8C3"/>
<stop offset="0.5114" style="stop-color:#F0E5BF"/>
<stop offset="0.6956" style="stop-color:#E6DBB6"/>
<stop offset="0.8269" style="stop-color:#D8CCA7"/>
<stop offset="0.9323" style="stop-color:#C6BA93"/>
<stop offset="1" style="stop-color:#B6AA83"/>
</linearGradient>
<path class="st15" d="M43.9,46.8c4.3,0,7.2-2.5,7.2-7.2s-3.1-7-7.3-7l1.6,0.6c2.8,0.7,4.8,3.4,4.8,6.5s-1.9,5.7-4.8,6.5"/>
<path class="st4" d="M45,22.7c0-1.8-6.2-3.3-13.8-3.3s-13.8,1.5-13.8,3.3v31.4V54c0,1.8,6.2,3.3,13.8,3.3S45,55.8,45,54v0.1V22.7z"
/>
<ellipse class="st0" cx="31.2" cy="22.7" rx="13.3" ry="2.6"/>
<path class="st5" d="M27.8,21.4"/>
<path class="st5" d="M21.5,22.4"/>
<path class="st17" d="M33.9,20.8c5.5,0,8.9,0.8,8.9,1.9c0,0.5-1,1-2.6,1.3C40.2,24,48,21.9,33.9,20.8z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="18.9062" y1="21.7559" x2="32.2139" y2="22.6411">
<stop offset="0" style="stop-color:#382717"/>
<stop offset="1" style="stop-color:#49331B"/>
</linearGradient>
<path class="st10" d="M22,24.6c0,0-3.8-3.2,14.2-4.4c0,0-9.2-0.8-15.7,0.9c0,0-4,0.9-2.1,2.3C18.4,23.4,20.1,24.3,22,24.6z"/>
<path class="st14" d="M45,22.5c0,1.8-6.2,3.3-13.8,3.3s-13.8-1.5-13.8-3.3"/>
<path class="st14" d="M45,22.7c0-1.8-6.2-3.3-13.8-3.3s-13.8,1.5-13.8,3.3"/>
<g>
<path class="st7" d="M40.3,24.9c0,0-0.3,0.1-0.8,0.2c-0.5,0.1-1.2,0.3-2,0.4c-0.9,0.1-1.9,0.3-2.9,0.3C33.5,26,32.3,26,31.2,26
c-1.2-0.1-2.3-0.1-3.4-0.2c-0.5,0-1.1-0.1-1.6-0.1c-0.5-0.1-1-0.2-1.4-0.2c-1.7-0.3-2.8-0.6-2.8-0.6s1.2,0.1,2.9,0.3
c0.4,0,0.9,0.1,1.4,0.2c0.5,0,1,0,1.6,0c1.1,0,2.2,0.1,3.4,0.1c1.1,0,2.3,0,3.4-0.1c0.5,0,1.1-0.1,1.5-0.1c0.5,0,1-0.1,1.4-0.1
c0.4,0,0.8-0.1,1.2-0.1c0.3,0,0.7-0.1,0.9-0.1C40.1,25,40.3,24.9,40.3,24.9z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="45.3652" y1="31.4702" x2="46.6709" y2="31.4702">
<stop offset="0" style="stop-color:#B6AA83"/>
<stop offset="0.2623" style="stop-color:#BEB28B"/>
<stop offset="0.6699" style="stop-color:#D6CAA4"/>
<stop offset="1" style="stop-color:#F3E8C3"/>
</linearGradient>
<path class="st2" d="M45.4,29.3c0,0,1.1,0.2,1.3,0.3v4c0,0-0.9-0.4-1.3-0.5V29.3z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="45.3652" y1="47.7295" x2="46.5889" y2="47.7295">
<stop offset="0" style="stop-color:#B6AA83"/>
<stop offset="0.2623" style="stop-color:#BEB28B"/>
<stop offset="0.6699" style="stop-color:#D6CAA4"/>
<stop offset="1" style="stop-color:#F3E8C3"/>
</linearGradient>
<path class="st3" d="M45.4,49.9c0,0,0.5-0.1,1.2-0.4v-3.9c0,0-0.3,0.2-1.2,0.5V49.9z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="17.4443" y1="39.4248" x2="31.32" y2="41.6584">
<stop offset="0" style="stop-color:#787157"/>
<stop offset="9.336331e-02" style="stop-color:#837B5F"/>
<stop offset="0.2765" style="stop-color:#A09674"/>
<stop offset="0.3167" style="stop-color:#A79C79"/>
<stop offset="0.6669" style="stop-color:#CDC29E"/>
<stop offset="1" style="stop-color:#F3E8C3"/>
</linearGradient>
<path class="st16" d="M32.8,26.3l-6.2,31.3c0,0-9-0.4-9.6-3.5l0-31.6C17,22.5,16.1,26.2,32.8,26.3z"/>
<g>
<g>
<path class="st12" d="M22.9,41.4c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.2,0.3
c-0.1,0.1-0.2,0.1-0.3,0.2s-0.3,0.1-0.5,0.1c-0.2,0-0.4-0.1-0.5-0.2c-0.1-0.1-0.2-0.2-0.3-0.2c-0.1-0.1-0.1-0.2-0.1-0.3
c0-0.1-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1c0.1-0.8,0.1-1.5,0.2-2.3c0-0.2,0.1-0.4,0.2-0.6
c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.3-0.2c0.1,0,0.2-0.1,0.4,0c0.1,0,0.2,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2
c0.1,0.1,0.2,0.2,0.2,0.4c0,0.2,0.1,0.3,0.1,0.5c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.2,0-0.2-0.1
c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0-0.3c0-0.1-0.1-0.1-0.1-0.2c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0
c0,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1s-0.1,0.1-0.1,0.3c-0.1,0.8-0.1,1.5-0.2,2.3c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1
c0,0,0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0.1,0,0.2,0.1c0.1,0,0.2,0,0.2,0c0,0,0.1,0,0.1-0.1
c0.1-0.1,0.1-0.1,0.1-0.2c0-0.1,0-0.1,0-0.2c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1c0,0,0.1-0.1,0.1-0.1s0.1-0.1,0.2-0.1
c0.1,0,0.1,0,0.2,0.1c0,0,0.1,0.1,0.1,0.1C22.9,41.3,22.9,41.3,22.9,41.4z"/>
<path class="st12" d="M25.9,41.6c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.2,0.3
c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.1-0.5,0.1s-0.4-0.1-0.5-0.1c-0.1-0.1-0.2-0.2-0.3-0.2c-0.1-0.1-0.1-0.2-0.2-0.3
s-0.1-0.2-0.1-0.3c0-0.1,0-0.2,0-0.2c0-0.1,0-0.1,0-0.1c0.1-0.8,0.1-1.5,0.2-2.3c0-0.2,0.1-0.4,0.1-0.6c0.1-0.1,0.2-0.3,0.2-0.3
c0.2-0.2,0.4-0.3,0.7-0.2c0.1,0,0.2,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2s0.2,0.2,0.2,0.4c0.1,0.2,0.1,0.3,0.1,0.5
C26,40,25.9,40.8,25.9,41.6z M25.1,42C25.1,41.9,25.1,41.9,25.1,42c0.1-0.1,0.1-0.2,0.1-0.2s0-0.1,0-0.1c0,0,0-0.1,0-0.1
c0,0,0,0,0,0c0-0.8,0.1-1.6,0.1-2.3c0-0.1,0-0.2,0-0.3c0-0.1-0.1-0.1-0.1-0.2c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0
c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0.1-0.1,0.2-0.1,0.3c0,0.8-0.1,1.5-0.1,2.3c0,0,0,0,0,0c0,0,0,0,0,0.1
s0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0.1,0,0.2,0C24.9,42.1,25,42.1,25.1,42
C25.1,42,25.1,42,25.1,42z"/>
<path class="st12" d="M29,42.3c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.5,0-1,0-1.5,0
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.2-0.1-0.3c0.1-1.3,0.1-2.6,0.2-4c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.1
c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,1.2-0.1,2.4-0.1,3.6c0.4,0,0.8,0,1.1,0C28.8,42.2,28.9,42.2,29,42.3z"/>
<path class="st13" d="M32.3,42.3c0.1,0.1,0.1,0.2,0.1,0.3s0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.5,0-1,0-1.5,0
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.2-0.1-0.3c0-1.3,0-2.6,0-4c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.1
c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,1.2,0,2.4,0,3.6c0.4,0,0.8,0,1.1,0C32.1,42.2,32.2,42.2,32.3,42.3z"/>
<path class="st13" d="M35.4,42.2c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.5,0-0.9,0-1.4,0
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.2-0.1-0.3c0-1.3-0.1-2.6-0.1-4c0-0.1,0-0.2,0.1-0.3s0.1-0.1,0.2-0.1c0.4,0,0.9,0,1.3,0
c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1c-0.3,0-0.7,0-1,0c0,0.5,0,1,0,1.5
c0.2,0,0.5,0,0.7,0c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1
c-0.2,0-0.5,0-0.7,0c0,0.3,0,0.7,0,1c0.3,0,0.7,0,1,0C35.3,42.1,35.3,42.2,35.4,42.2z"/>
<path class="st13" d="M38.6,41.6c0,0.1,0,0.1,0,0.2c0,0.1,0,0.2-0.1,0.3c0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.2-0.3,0.2
c-0.1,0.1-0.3,0.1-0.5,0.1c-0.2,0-0.4,0-0.5-0.1c-0.1-0.1-0.2-0.1-0.3-0.2c-0.1-0.1-0.1-0.2-0.2-0.3c0-0.1-0.1-0.2-0.1-0.3
c0-0.1,0-0.2,0-0.2s0-0.1,0-0.1c0-0.8-0.1-1.5-0.1-2.3c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.1-0.3,0.2-0.4c0.2-0.2,0.4-0.3,0.7-0.3
c0.3,0,0.5,0.1,0.7,0.2c0.1,0.1,0.2,0.2,0.2,0.3c0.1,0.1,0.1,0.3,0.2,0.6c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.3c0-0.1,0-0.2,0-0.2c0-0.1-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0
c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.2c0,0.1,0,0.2,0,0.3c0,0.8,0.1,1.6,0.1,2.3c0,0,0,0,0,0c0,0,0,0,0,0.1
c0,0,0,0.1,0,0.1s0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0.1,0,0.2,0c0.1,0,0.2,0,0.2-0.1c0,0,0.1,0,0.1-0.1
c0,0,0-0.1,0.1-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0-0.2,0-0.4,0-0.6c-0.1,0-0.2,0-0.2,0
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.1c0.3,0,0.6,0,0.9-0.1
c0,0.4,0.1,0.9,0.1,1.3C38.6,41.5,38.6,41.5,38.6,41.6z"/>
<path class="st13" d="M41.6,41.8c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.2-0.1,0.3s-0.1,0.1-0.2,0.1c-0.5,0-0.9,0.1-1.4,0.1
c-0.1,0-0.2,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2c-0.1-1.3-0.2-2.6-0.3-4c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.1-0.1,0.2-0.1
c0.4,0,0.9-0.1,1.3-0.1c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.1,0.1-0.2,0.1
c-0.3,0-0.7,0.1-1,0.1c0,0.5,0.1,1,0.1,1.5c0.2,0,0.5,0,0.7-0.1c0.1,0,0.2,0,0.2,0.1c0.1,0.1,0.1,0.1,0.1,0.2c0,0.1,0,0.2-0.1,0.3
c-0.1,0.1-0.1,0.1-0.2,0.1c-0.2,0-0.5,0-0.7,0.1c0,0.3,0.1,0.7,0.1,1c0.3,0,0.7-0.1,1-0.1C41.4,41.7,41.5,41.8,41.6,41.8z"/>
</g>
</g>
<g class="steam1">
<path class="st1" d="M39.1,20.8c0,0-0.2-0.1-0.6-0.3c-0.2-0.1-0.4-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.8-0.7c-0.2-0.3-0.5-0.6-0.7-1
c-0.2-0.4-0.4-0.9-0.5-1.4c0-0.3,0-0.5-0.1-0.8c0-0.3,0.1-0.5,0.1-0.8c0.1-0.3,0.1-0.5,0.2-0.7c0.1-0.3,0.2-0.5,0.3-0.7
c0.5-0.9,1.1-1.7,1.7-2.4c0.3-0.4,0.5-0.7,0.8-1.1c0.2-0.3,0.4-0.7,0.5-1c0.1-0.3,0.2-0.6,0.2-0.9c0.1-0.3,0-0.5,0-0.7
C39.7,7.2,39.6,7,39.6,7s0,0.1,0.1,0.2c0,0.1,0.2,0.3,0.2,0.5c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3,0,0.7-0.1,1.1
c-0.2,0.8-0.6,1.6-1.1,2.4c-0.5,0.8-1.1,1.6-1.6,2.4c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.2,0.5-0.2,0.6c0,0.2-0.1,0.4-0.1,0.6
c0,0.2,0,0.4,0,0.6c0.1,0.4,0.1,0.8,0.3,1.2c0,0.2,0.2,0.4,0.2,0.5c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.6,0.8,1.1,1.1,1.4
C38.9,20.6,39.1,20.8,39.1,20.8z"/>
</g>
<g class="steam2">
<path class="st1" d="M25.9,17.9c0,0-0.2-0.1-0.6-0.3c-0.2-0.1-0.4-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.8-0.7c-0.3-0.3-0.5-0.6-0.7-1
c-0.2-0.4-0.4-0.9-0.5-1.4c0-0.3,0-0.5-0.1-0.8c0-0.3,0.1-0.5,0.1-0.8c0.1-0.3,0.1-0.5,0.2-0.7c0.1-0.3,0.2-0.5,0.3-0.7
c0.5-0.9,1.1-1.7,1.7-2.4c0.3-0.4,0.5-0.7,0.7-1.1c0.2-0.3,0.4-0.7,0.5-1c0.1-0.3,0.2-0.6,0.2-0.9c0.1-0.3,0-0.5,0-0.7
c-0.1-0.4-0.1-0.7-0.1-0.7s0,0.1,0.1,0.2c0,0.1,0.2,0.3,0.2,0.5c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3,0,0.7-0.1,1.1
c-0.2,0.8-0.6,1.6-1.1,2.4c-0.5,0.8-1.1,1.6-1.6,2.4c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.2,0.5-0.2,0.6c0,0.2-0.1,0.4-0.1,0.6
c0,0.2,0,0.4,0,0.6c0.1,0.4,0.1,0.8,0.3,1.2c0,0.2,0.2,0.4,0.2,0.5c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.6,0.8,1.1,1.1,1.4
C25.8,17.7,25.9,17.9,25.9,17.9z"/>
</g>
<g class="steam3">
<path class="st1" d="M32.5,22.5c0,0-0.2-0.1-0.6-0.3c-0.2-0.1-0.4-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.8-0.7c-0.3-0.3-0.5-0.6-0.7-1
c-0.2-0.4-0.4-0.9-0.5-1.4c0-0.3,0-0.5-0.1-0.8c0-0.3,0.1-0.5,0.1-0.8c0.1-0.3,0.1-0.5,0.2-0.7c0.1-0.3,0.2-0.5,0.3-0.7
c0.5-0.9,1.1-1.7,1.7-2.4c0.3-0.4,0.5-0.7,0.7-1.1c0.2-0.3,0.4-0.7,0.5-1c0.1-0.3,0.2-0.6,0.2-0.9c0.1-0.3,0-0.5,0-0.7
C33.1,8.9,33,8.7,33,8.7s0,0.1,0.1,0.2c0,0.1,0.2,0.3,0.2,0.5c0.1,0.2,0.2,0.5,0.2,0.8c0,0.3,0,0.7-0.1,1.1
c-0.2,0.8-0.6,1.6-1.1,2.4c-0.5,0.8-1.1,1.6-1.6,2.4c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.2,0.5-0.2,0.6c0,0.2-0.1,0.4-0.1,0.6
c0,0.2,0,0.4,0,0.6c0.1,0.4,0.1,0.8,0.3,1.2c0,0.2,0.2,0.4,0.2,0.5c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.6,0.8,1.1,1.1,1.4
C32.3,22.3,32.5,22.5,32.5,22.5z"/>
</g>
</svg>
<script type=”text/javascript” src=”prefixfree.min.js”></script>
</body>
Here's a quick starting point based off of your code: http://codepen.io/anon/pen/rAdom?editors=101
First, define keyframes for the animation:
#keyframes steaming {
0% {
transform: translateY(0px);
opacity: 0;
}
50% { opacity: 1; }
100% {
transform: translateY(-10px);
opacity: 0;
}
}
#-webkit-keyframes {
...
}
The steam will start off invisible (opacity: 0), then fade in (opacity: 1) and back out, as it moves up, as determined by translateY(-10px). Note the pixel values are scaled according to the SVG viewbox and height/width values.
Then, apply these keyframes to each of the steam SVG elements, using the classes you've set:
.steam1{
-webkit-animation: steaming 7s linear infinite;
-moz-animation: steaming 7s linear infinite;
animation: steaming 7s linear infinite;
}
You can adjust the animation speeds to make it look a bit better.