CODEWITHSUNDEEP
cssimagesvghref
Kevin Kibler
Kevin Kibler

Reputation: 13605

Set styles for nested image href inside an svg

I have an svg that includes a bunch of images using href, but I can't seem to get the styles. specifically color, to apply inside the referred file, which is also an svg.

In my main svg:

...
<image class="graph-node" href="image.svg"></image>
...

image.svg:

<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="currentColor" viewBox="0 0 24 24">
    <path ... />
</svg>

I've tried setting stroke, fill, color, currentColor via css on the image tag and also via style directly on the image tag. The image loads correctly, but it doesn't use the color specified.

Additional context: I'm using d3 to generate an svg programmatically, and the image to use for each node will be an svg file that's also hosted on the same server. The color does work if I inline the content of the svg and set the fill and stroke to the values I want, so I think the problem is just getting the styles to cross the href boundary.

Upvotes: 0

Views: 18

Answers (0)

Related Questions