How do I set presentation attributes of Image tags that can be found within SVGs (Files or Inline)?

Question

I am writing an SVG editor program. I am trying to implement highlighted feel for when an element (<image>, not <img>) is clicked. I have implemented this for other elements like <circle>, by setting stroke, stroke-width, and stroke-dash-array. But setting the presentation attributes of the <image> tag, either by setting the attributes directly or through CSS styling, is not taking effect. I also tried the border style but it's not working. How can I achieve this?

According to MDN , <image> is meant to have have global attributes, including presentation, which ultimately means this should work. If you also inspect <image> with a browser you will see it will highlight like it follows box model.

<svg viewBox="0 0 1370 1170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image width="128" height="128" x="617.9207153320312" href="data:some-valid-link" style="stroke-width: 3px; stroke-dasharray: 7px;" stroke="#3aa2c2"></image>
</svg>

Answer 1

I don't think that you can set stroke on an image.

Usually those attributes are used to 'draw' vector image. Here you're trying to put a stroke on a raster image.

If you want to put lines around a square image you could use a border to achieve it.

If you want to put lines around a complicated shape, I don't think it's possible to do that in CSS. You would need to add that in graphics software.

Answer 2

You cannot restyle an external SVG, if you load it in an <img> tag.

Instead, you could paste the <svg> code directly into your HTML, and apply styles like this (source svg):

svg {
  width: 500px;
}

svg path,
svg polygon {
  stroke-width: 10px;
  stroke-dasharray: 10px;
}

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
  Sorry, your browser does not support inline SVG.
</svg>

Answer 3

You would need and SVG with a more specific code targeting all the vectors and not just a tag. Then you could make groups of the parts of the image/draw you want to style. You can do this by using illustrator, then after grouping the parts, your code will have a 'g' tag: <g id="group_to_style" > with an ID that you have named when doing the groups. Then using CSS you can target the groups of the SVG and style or even animate. Like gru said, with an you cant style or animate anything.