How to put a border / stroke in an image in an SVG?

Question

How to put a border / stroke in an image in an SVG?

Navigation

#1 by (3 votes)

3

I need to add a stroke around a <image> within a <svg> . But nothing happens when you add the value in that tag.

See below what happens: when I use it in <image> it does not work, however in <rect> it works.

Example:

.my-svg{
  stroke: red;
  stroke-width: 3px;
}

<svg class="my-svg">
  <image y="0" x="0" height="100" width="100" href="https://i.stack.imgur.com/eJaft.jpg" />
</svg>

<svg class="my-svg">
  <rect height="50" width="50"></rect>
</svg>

In this case, what could be done to insert a stroke into the image?

html5 imagem svg

asked by anonymous 24.04.2018 / 18:08

1 answer

How to add elements of two Streams in java? In which tag do you put the form?

score 3 · Accepted Answer

It is possible if you use a pattern within svg linking the image in the shape (rect, polygon, circle, until in the path it works).

First you create the definition <defs> then the <pattern> and put the image that will be BG <image> Then you use pattern-img as fill of element fill="url(#ID-do-pattern)"

See the example for a better understanding.

<svg xmlns="http://www.w3.org/2000/svg" id="svg2" version="1.1" width="900px" height="611px" viewBox="0 0 900 611">
    <defs>
        <pattern id="p2" x="0" y="0" height="1" width="1">
            <image x="0" y="0" xlink:href="http://placecage.com/300/300"></image>
        </pattern>
    </defs>

    <rect x="0" y="0" width="300px" height="100px" fill="url(#p2)" stroke="black" />

    <rect x="0" y="110" width="150" height="200" fill="url(#p2)" stroke="red" stroke-width="2" />

    <circle cx="250" cy="200" r="70" fill="url(#p2)" stroke="blue" stroke-width="3"/>

    <polygon points="300,300, 250,390, 180,420, 100,400, 200,270" fill="url(#p2)" stroke="green" stroke-width="4"/>

    <path d="M350 400 L475 300 L225 200 Z" fill="url(#p2)" stroke="red" stroke-width="8" />
</svg>

Link I used to base