I have two paths that are incredibly similar except for the ending number in the d attribute. The first path displays correctly but the second path does not show up. What's weird is if I change the stroke of the second path to anything other than my defined gradient it'll appear. The gradient also appears if I truncate the decimals from the last number. Is there any reason why the second one doesn't appear with the gradient?
For what it's worth I'm trying to get this to work on google chrome.
<svg height="0" width="0">
<defs>
<linearGradient id="pageSearchGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#a0c3d2" stop-opacity="0.75"></stop><stop offset="40%" stop-color="#F59B23" stop-opacity="0.85"></stop><stop offset="100%" stop-color="#F59B23" stop-opacity="1"></stop>
</defs>
</svg>
<svg width="1600" height="500" class="sankey-diagram "><g width="1450" height="500" transform="translate(150, 0)"><g class="sankey-links">
<!-- Only their decimal points differ for the last number and yet this one is the one that shows up -->
<path d="M12,436.7529384197002C365.5,436.7529384197002,365.5,436.75293841969994,719,436.38406598523085" class="sankey-link " style="stroke: url("#pageSearchGradient"); opacity: 0.3; stroke-width: 126.494;"></path>
<path d="M12,436.7529384197002C365.5,436.7529384197002,365.5,436.75293841969994,719,436.75293841969994" class="sankey-link " style="stroke: url("#pageSearchGradient"); opacity: 0.3; stroke-width: 126.494;"></path>
</svg>
Link to https://codepen.io/anon/pen/OvEzNJ?editors=1000#0
Aucun commentaire:
Enregistrer un commentaire