Ảnh SVG có đường viền/nét viền

Question

Tôi đang cố thêm đường viền xung quanh hình ảnh svg. Tôi đã thử 2 cách tiếp cận nhưng cả hai thất bại ...

Cố gắng 1: Số trận hoà hình ảnh nhưng không có biên giới ..

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

Cố gắng 2: Số trận hoà hình ảnh nhưng không có biên giới ..

<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;"/> 

Vì vậy, câu hỏi của tôi là, nó có thể xác định một hình ảnh trên một yếu tố svg và có một biên giới/đột quỵ xung quanh nó cùng một lúc?

Hơn nữa, có vẻ như tôi có thể định vị các phần tử svg có dịch và với thuộc tính x/y. Đó là preffered và tại sao?

Answer 1

stroke không áp dụng cho <image> hoặc <use>, chỉ hình dạng và văn bản. Nếu bạn muốn vẽ một đường viền quanh nó, hãy vẽ <rect> sau hình ảnh có cùng kích thước x, y, chiều rộng và chiều cao làm hình ảnh và cho rằng nét vẽ và dấu "không".

Để dịch vs x/y - tùy thuộc vào trường hợp sử dụng của bạn.