javascript - Why are the gradients in this SVG displaying as black? -
i have made svg , added page has rather unusual behaviour, page loading can see svg on page(looks fine gradients showing, see below image. have 2 svg files 1 logo , other 'k' gets hidden after loading).
after page loads reason gradients disappear , left black ascenders , descenders. (see below)
but things weirder still if click green circle button, causes side bar collapse angular hides 'logo' svg , displays 'k' svg. have hit toggle once , correctly gradient issue. can hide 'k' & show 'logo' again , fine. see below image of after toggling hide/show of sidebar.
here svg code perhaps it? love strange behaviour , not sure how solve it.
logo svg:
<!-- begin logo svg --> <div class="logo" ng-hide="sidebarcollapsed"> <svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 443.7 1602 312.6" style="enable-background:new 0 443.7 1602 312.6;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#accend_1_);} .st1{fill:url(#decend_1_);} .st2{fill:#ffffff;} </style> <g id="k"> <lineargradient id="accend_1_" gradientunits="userspaceonuse" x1="-6.7993" y1="1185.7142" x2="42.6791" y2="1114.1494" gradienttransform="matrix(3.135 0 0 -3.135 0 4205.7539)"> <stop offset="0" style="stop-color:#55c953"/> <stop offset="0.2752" style="stop-color:#52ac55"/> <stop offset="0.8681" style="stop-color:#49645a"/> <stop offset="1" style="stop-color:#47535b"/> </lineargradient> <polygon id="accend" class="st0" points="78.4,582.9 78.4,445 0,445 0,707.1 79,582.9 "/> <lineargradient id="decend_1_" gradientunits="userspaceonuse" x1="72.7276" y1="1092.825" x2="1.3943" y2="1202.1583" gradienttransform="matrix(3.135 0 0 -3.135 0 4205.7539)"> <stop offset="0" style="stop-color:#55c953"/> <stop offset="0.2752" style="stop-color:#52ac55"/> <stop offset="0.8681" style="stop-color:#49645a"/> <stop offset="1" style="stop-color:#47535b"/> </lineargradient> <polygon id="decend" class="st1" points="146.1,596.7 105,658.2 162.4,749.1 253.6,749.1 "/> <polygon id="branch" class="st2" points="78.4,699.2 78.4,750 0.3,750 0.3,707.1 165.2,444.7 247,444.7 "/> </g> <g id="i_1_"> <rect id="title" x="280.3" y="443.7" class="st2" width="68.3" height="52"/> <rect id="stalk" x="280.3" y="519.9" class="st2" width="68.3" height="228.9"/> </g> <path id="n" class="st2" d="m541.7,749.1v624c0-25.7-5-47.3-35.7-47.3c-31.7,0-39.2,20.7-39.2,48v124.5h-68.7v520.2h64v24.5h0.9 c14.4-23.5,34.8-32.3,62.4-32.3c19.4,0,43.6,7.5,58.6,19.8c21.9,18.2,26.3,47,26.3,74v143.3h-68.7v749.1z"/> <path id="d" class="st2" d="m830.8,445v94.4c-18.8-19.1-41.7-27.3-68-27.3c-69,0-113.8,55.2-113.8,121.6 c0,67.7,44.2,122.6,114.4,122.6c27,0,53.9-10.3,68.3-32.3h5.6v21.9h62.7v445h830.8l830.8,445z m774,692.6 c-34.2,0-57.4-25.7-57.4-58.9s25.1-57.4,58.3-57.4c32.9,0,57.7,24.5,57.7,57.4c832.7,667.2,808.2,692.6,774,692.6z"/> <path id="r" class="st2" d="m1015.1,623v125.7h-68.3v519.9h64.3v24.5h0.9c11.9-23.5,31-32.3,57.4-32.3v69 c1038.9,582,1015.1,587.6,1015.1,623z"/> <path id="e" class="st2" d="m1322,637.2c0-69-50.8-125.1-121-125.1c-67.1,0-120.1,56.4-120.1,122.9c0,66.8,54.5,121.3,121.3,121.3 c51.4,0,91.9-32.3,111.9-79.3h1244c-11.3,15.7-23.2,21.3-41.7,21.3c-27,0-49.5-11.9-53.6-43.3h171.5 c1321.4,651.9,1322,643.1,1322,637.2z m1149.6,608c5.3-21.9,27.3-39.2,52-39.2c24.8,0,46.7,17.2,52,39.2h1149.6z"/> <path id="dlast" class="st2" d="m1533,445v94.4c-18.8-19.1-42.3-27.3-69-27.3c-69,0-114.1,55.2-114.1,121.6 c0,67.7,44.2,122.6,114.4,122.6c27,0,53.6-10.3,68-32.3h3.8v21.9h65.8v445h1533l1533,445z m1475,692.6c-34.2,0-57.4-25.7-57.4-58.9 s25.1-57.4,58.3-57.4c33.2,0,57.7,24.5,57.7,57.4c1533.7,667.2,1509.2,692.6,1475,692.6z"/> </svg> </div> <!-- end logo svg --> 'k' svg:
<!-- begin mark svg --> <div class="mark" ng-show="sidebarcollapsed"> <svg version="1.1" id="mark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 444.7 253.6 305.4" style="enable-background:new 0 444.7 253.6 305.4;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#accend_1_);} .st1{fill:url(#decend_1_);} .st2{fill:#ffffff;} </style> <g id="k"> <lineargradient id="accend_1_" gradientunits="userspaceonuse" x1="-6.7993" y1="1185.7142" x2="42.6791" y2="1114.1494" gradienttransform="matrix(3.135 0 0 -3.135 0 4205.7539)"> <stop offset="0" style="stop-color:#55c953"/> <stop offset="0.2752" style="stop-color:#52ac55"/> <stop offset="0.8681" style="stop-color:#49645a"/> <stop offset="1" style="stop-color:#47535b"/> </lineargradient> <polygon id="accend" class="st0" points="78.4,582.9 78.4,445 0,445 0,707.1 79,582.9 "/> <lineargradient id="decend_1_" gradientunits="userspaceonuse" x1="72.7276" y1="1092.825" x2="1.3943" y2="1202.1583" gradienttransform="matrix(3.135 0 0 -3.135 0 4205.7539)"> <stop offset="0" style="stop-color:#55c953"/> <stop offset="0.2752" style="stop-color:#52ac55"/> <stop offset="0.8681" style="stop-color:#49645a"/> <stop offset="1" style="stop-color:#47535b"/> </lineargradient> <polygon id="decend" class="st1" points="146.1,596.7 105,658.2 162.4,749.1 253.6,749.1 "/> <polygon id="branch" class="st2" points="78.4,699.2 78.4,750 0.3,750 0.3,707.1 165.2,444.7 247,444.7 "/> </g> </svg> </div> <!-- end mark svg -->
if svgs okay when viewed in browser, unlikely svgs themselves.
my first suspicion fall on js in webapp and/or way including svgs on page.
how svgs added page? included using <img> or <object>, or including them inline in page? if it's latter, suggest cause fact have duplicate id attributes in svgs. example, both svgs have gradients named accend_1_ , decend_1_. ids need unique. try giving them different ids.
if not inlining them, please supply more information how using them.
Comments
Post a Comment