4

Eu preciso adicionar um stroke ao redor de um <image> dentro de um <svg>. Porém não acontece nada ao adicionar o valor nessa tag.

Veja abaixo o que acontece: quando uso no <image> não funciona, porém no <rect> funciona.

Exemplo:

.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>

Nesse caso, o que poderia ser feito para se inserir um stroke na imagem?

3
  • 1
    Publiquei uma resposta uma resposta sem querer :/ , querer executar snipped e cliquei sem pensar. De qualquer maneira, vê se isto te ajuda: stackoverflow.com/questions/13217669/…
    – Miguel
    24/04/2018 às 16:12
  • 1
    @Miguel publica ela traduzida para nóis ;p 24/04/2018 às 16:14
  • Estou a trabalhar nisso, isto agora é pessoal lol, orgulho fala alto agora
    – Miguel
    24/04/2018 às 16:16

1 Resposta 1

4

É possivel se vc usar um pattern dentro do svg linkando a imagem no shape (rect, polygon, circle, até no path funciona).

Primeiro vc cria a definição <defs> depois o <pattern> e coloca a imagem que vai ser o BG <image> Depois vc usa a pattern-img como fill do elemento fill="url(#ID-do-pattern)"

Veja no exemplo para entender melhor.

<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="https://unsplash.it/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 que usei de base para fazer

2
  • 1
    Gostei do placecage, kkkkk 24/04/2018 às 17:31
  • @WallaceMaxters na próxima vou usar aquela foto do Caetano Veloso :D
    – hugocsl
    24/04/2018 às 17:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .