Возможно ли использовать фоновое изображение на штрихе элемента SVG?

Question

Так же, как задает вопрос - я пытаюсь выяснить, можно ли использовать какой-то шаблон или повторное фоновое изображение для хода SVG-пути.

Является ли это выполнимым? Или вы ограничены только цветами?

TIA!

Answer 1

Вы можете использовать <pattern> в качестве штриха, например.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
     <defs> 
 
     <pattern id="p1" patternUnits="userSpaceOnUse" width="32" height="32"> 
 
      <image xlink:href="http://phrogz.net/tmp/alphaball-small.png" width="32" height="32" /> 
 
     </pattern> 
 
     </defs> 
 
     <rect stroke-width="32" stroke="url(#p1)" width="200" height="200" fill="none"/> 
 
    </svg>

Шаблон может содержать <svg> элементы чертежа или (как здесь) изображения, или обоих.

Answer 2

Вы можете использовать свойство stroke-dasharray для «шаблонов» в такте:

<line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" /> 

При этом вы можете указать длину штрихов и пробелов между ними. Для некоторых примеров рассмотрим MDN example page.