Very similar questions to this have been asked before but I can't get the provided answers to work, so am asking for specific advice: SVG gradient using CSS
I have a .svg image that will be included multiple times on the page, each one having potentially different styles applied. The .svg is a square representing water.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 100 100"
id="svg4">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs-water">
<linearGradient
id="stream-ds-us">
<stop offset="5%" stop-color="#83AFE2" />
<stop offset="95%" stop-color="#2863a8" />
</linearGradient>
<linearGradient
id="ripple-ds-us">
<stop offset="5%" stop-color="#5A95D8" />
<stop offset="95%" stop-color="#0054a6" />
</linearGradient>
</defs>
<rect
width="100"
height="100"
id="water-base"
x="0"
y="0" />
<path
d="m 100,1.6738281 c -0.193747,0.00276 -0.368843,0.00704 -0.626953,0.00586 -2.46841,2.276385 -6.625759,1.4682153 -10.027344,2.4570313 -1.69447,0.2341008 -4.08708,3.2353597 -1.625,3.1210937 5.901695,0.283667 0.217399,0.2832031 5.902344,0.2832031 C 96.797654,8.3141367 97.980584,8.0867076 100,7.8886719 Z M 1.09375,1.71875 C 0.67241524,1.7194589 0.34203754,1.7315121 0,1.7421875 V 7.703125 C 6.0164361,7.6271106 11.011624,7.3224702 17.414062,6.40625 L 26.984375,6.1230469 39.439453,5.2714844 C 43.629387,5.3857504 44.147282,2.859101 41.263672,2.625 30.204283,2.203517 21.314458,2.0641545 9.6660156,1.7734375 5.7799021,1.7839375 3.0342428,1.71536 1.09375,1.71875 Z M 82.304688,8.3417969 C 61.525331,8.1820608 37.884127,12.867255 23.984375,13.535156 9.1579739,14.247583 7.625297,11.008803 5.5683594,13.833984 c -3.0295451,4.161057 6.5222476,5.895782 10.6289066,6.441407 9.894134,1.314569 27.187737,4.747176 27.25,1.349609 0.03288,-1.792566 -10.429456,-4.395214 1.199218,-5.244141 14.553409,0.603214 29.236467,0.618573 43.570313,-1.796875 18.436583,-3.106815 0.333381,-6.0540827 -1.796875,-6.1425778 -1.356106,-0.056335 -2.729944,-0.08896 -4.115234,-0.099609 z M 0,17.121094 v 9.820312 c 2.1469149,0.319287 3.2871796,0.743757 6.5644531,-0.521484 5.6817229,0 0.00206,2.13e-4 5.9003909,-0.449219 2.460687,0.181039 0.06851,-4.57441 -1.625,-4.945312 C 7.4401885,19.458743 3.2853743,20.737488 0.81835938,17.130859 0.4816479,17.133313 0.27662565,17.12439 0,17.121094 Z m 98.462891,0.07422 c -1.912686,-0.0054 -4.61879,0.102576 -8.449219,0.08594 -11.481532,0.460603 -20.243602,0.679873 -31.144531,1.347656 -2.842292,0.370902 -2.333011,4.376352 1.796875,4.195313 l 12.277343,1.347656 9.433594,0.449219 c 6.454912,1.484802 11.443872,1.964108 17.558594,2.070312 l 0.04883,-9.445312 c -0.446037,-0.02972 -0.935617,-0.04918 -1.521484,-0.05078 z M 48.005859,26.671875 C 39.59762,26.6343 31.223196,27.380818 23.371094,30.039062 17.147635,32.145948 5.3566958,33.375417 0,33.849609 v 7.839844 c 2.0355753,-0.07809 4.4178461,-0.119922 5.9921875,0.0332 3.4001656,0.330712 6.7411735,-3.105959 10.3378905,-3.894531 6.161725,-1.350897 12.701391,-0.0521 18.875,-1.347656 5.240295,-1.099695 9.85049,-4.505043 15.13086,-5.392578 5.269564,-0.885719 10.780681,1.150865 16.029296,0.148437 9.79751,-1.871218 12.803025,-2.782217 -3.294922,-3.894531 C 58.108228,26.998933 53.050803,26.69442 48.005859,26.671875 Z m 41.587891,7.019531 c -4.493566,-0.0066 -9.297975,0.120003 -13.171875,0.541016 -26.469168,3.3507 -84.2484822,11.649822 -31.257813,9.138672 17.589937,-4.097633 25.054544,-4.35532 37.669922,-3.894532 4.273942,0.15611 9.613069,2.876428 12.632813,2.246094 1.173292,-0.24491 2.90129,-0.251458 4.533203,-0.185547 V 33.919922 C 97.366734,33.815447 93.700217,33.6974 89.59375,33.691406 Z m -3.101562,11.609375 c -7.258162,0.01259 -14.882813,0.466797 -14.882813,0.466797 0,0 -41.19743,2.189795 -54.380859,5.394531 -4.56846,1.110539 9.303996,1.274847 13.783203,2.996094 6.117596,2.350839 18.875,1.796875 18.875,1.796875 0,0 13.64516,0.779531 19.02539,-0.748047 1.458653,-0.414147 -10.330921,-4.169277 -1.347656,-4.345703 10.385357,-0.203962 15.654354,0.43916 28.914063,-1.048828 2.382447,-0.267355 2.555568,-3.98792 -3.146485,-4.34375 -2.042112,-0.127435 -4.420464,-0.172164 -6.839843,-0.167969 z M 17.599609,57.355469 c -1.386079,0.01065 -2.760309,0.04132 -4.117187,0.09766 -2.13147,0.0885 -20.2439603,3.035763 -1.796875,6.142578 14.342014,2.415448 29.032049,2.402042 43.59375,1.798828 11.635302,0.848927 1.166349,3.449622 1.199219,5.242188 0.06229,3.397567 17.365856,-0.03308 27.265625,-1.347657 C 87.853138,68.743437 97.41213,67.008713 94.380859,62.847656 92.322754,60.022475 90.787977,63.259302 75.953125,62.546875 62.045452,61.878974 38.390807,57.195733 17.599609,57.355469 Z M 100,66.132812 c -0.303567,0.0028 -0.510177,0.01234 -0.867188,0.0098 -2.468416,3.606629 -6.625752,2.327883 -10.027343,3.894531 -1.694467,0.370902 -4.087084,5.126352 -1.625,4.945313 5.901697,0.449432 0.217394,0.449219 5.902343,0.449219 3.305843,1.275543 4.434471,0.833711 6.617188,0.513671 z M 1.4316406,66.207031 C 0.88006622,66.208537 0.4248545,66.227108 0,66.253906 v 9.447266 c 6.0988025,-0.107691 11.083749,-0.587003 17.527344,-2.06836 L 26.966797,73.183594 39.25,71.835938 c 4.132245,0.181038 4.642742,-3.824411 1.798828,-4.195313 C 30.141695,66.972842 21.374793,66.753572 9.8867188,66.292969 6.0541065,66.309612 3.3454179,66.201655 1.4316406,66.207031 Z M 39.220703,78.380859 c -3.534026,0.0411 -7.061287,0.533916 -11.056641,1.095703 -9.763027,1.394419 -19.8862188,3.769427 -4.792968,4.34375 5.50691,0.349567 -0.51738,2.853376 -3.746094,2.396485 H 4.34375 c -9.7054704,3.013503 11.216867,1.484437 11.537109,4.044922 1.580711,4.256914 -19.7215452,4.852651 -14.5332028,7.490234 4.6441336,1.947541 61.1204568,-3.652656 90.4863278,-1.947265 3.540682,1.023769 3.307414,-3.355314 0,-3.744141 -11.688418,-1.904356 -43.887966,1.361745 -49.58789,-2.996094 -3.302356,-2.656513 5.656778,-3.1467 10.33789,-2.697265 17.195206,0.501395 17.110642,-1.071337 25.31836,-1.648438 13.438168,-0.07418 37.977216,-4.994849 6.740234,-4.34375 L 57.376953,80.673828 C 53.569446,80.265904 49.330489,79.996671 45.691406,78.876953 43.463333,78.493879 41.341119,78.356198 39.220703,78.380859 Z"
id="water-ripple" />
</svg>
This image is inserted multiple times into the DOM via a templating system to give the DOM structure:
There are 3 possible class that can be applied to the .svg
- Downstream
- Upstream
- A gradient that blends between upstream and downstream
The (S)CSS that applys these styles is:
.water {
background-color: blue; /* default - in case something goes wrong */
&.downstream {
#water-base { fill: #83AFE2 !important; }
#water-ripple { fill: #5A95D8 !important; }
}
&.upstream {
#water-base { fill: #2863a8 !important; }
#water-ripple { fill: #0054a6 !important; }
}
&.downstream-upstream {
#water-base { fill: url(#stream-ds-us) !important; }
#water-ripple { fill: url(#ripple-ds-us) !important; }
}
}
The solid fill colours are working as expected and change the .svg elements #water-base and #water-ripple but the class that applies the gradient simply displays as a blue square (from the background-color)
If I specify the gradient in the actual .svg it works fine, however I will need to switch between gradients so ultimately will need multiple gradient defs
My specific question is:
How do you apply .svg internally defined styles to .svg elements based on their id attribute through css?
UPDATE 1:
Thought a Fiddle might help explain the problem, and found that it works in the fiddle.. https://jsfiddle.net/ukcajwtz/
It might be an issue with the SCSS transpiling as when I copied it out to the fiddle it had changed the url() references... will report back
UPDATE 2:
It was the SCSS transpiling messing with the fill: url(#stream-ds-us). As i couldn't figure out anyway to tell the transpiler that these were fine / absolute I have moved these classes into a plain old .css file and included that separately.
