Я пытаюсь добавить границу вокруг изображения svg. Я пробовал 2 подхода, но оба не удалось...
Попытка 1: Рисует изображение, но без рамки.
<image id="note-0" xlink:href="#" onclick="location.href='http://example.com/example.png'; return false;" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image>
Попытка 2: Рисует изображение, но без рамки.
<defs>
<image id="image1352022098990svg" height="202" width="150" xlink:href="#" onclick="location.href='http://example.com/example.png'; return false;"></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;"/>
Итак, мой вопрос: возможно ли определить изображение на элементе svg и одновременно иметь границу/штрих?
Пожалуй, я могу позиционировать элементы svg с переводом и с атрибутом x/y. Что предпочтительнее и почему?
stroke не относится к <image> или <use>, только фигуры и текст. Если вы хотите нарисовать границу вокруг него, нарисуйте <rect> после изображения с теми же x, y, width и height, что и изображение, и дайте ему штрих и заливку "none".
Что касается перевода vs x/y - это зависит от вашего варианта использования.