Menu
I'm trying to add a border around a svg image. I have tried 2 approaches but both failed...
Attempt 1 : Draws image but no border..
<image id="note-0" xlink:href="http://example.com/example.png" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image>
Attempt 2 : Draws image but no border..
<defs>
<image id="image1352022098990svg" height="202" width="150" xlink:href="http://example.com/example.png"></image>
</defs>
<use xmlns="http://www.w3.org/2000/svg" id="note-0" xlink:href="#image1352022098990svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"/>
So my question is, is it possible to define a image on a svg element and have a border/stroke around it at the same time?
Futhermore it seems i can position svg elements with translate and with the x/y attribute. Which is preffered and why?
348
You can get an inner stroke by drawing a double-width centred stroke, then discarding everything outside the boundary of the shape – or alternatively, only showing everything inside the shape. We can achieve the latter with an SVG feature called clipping.
The stroke property in CSS is for adding a border to SVG shapes. This will override a presentation attribute <path stroke="#fff" ... /> This will not override an inline style e.g. <path style="stroke: #fff;" ... />.
In vector graphics, a stroke is a visible line that you draw along a path – think of it like the stroke of a brush. In this context, I’m thinking of the path that encloses an entire shape; its outline. Normally, the stroke is centred on the boundary of the shape: that is, half of the stroke is inside the shape, and half of it is outside.
All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle. Sorry, your browser does not support inline SVG. The stroke-width property defines the thickness of a line, text or outline of an element: Sorry, your browser does not support inline SVG.
stroke does not apply to <image> or <use>, only shapes and text. If you want to draw a border round it, draw a <rect> after the image with the same x,y,width and height as the image and give that a stroke and a fill of "none".
As to translate vs x/y - it depends on your use case.
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
