SVG путь с границей

Как я могу создать путь с заливкой и контур похож на SVG путь с границей

До сих пор я не нашел несколько способов, но ни, что особенно чистые.

Один из способов - использовать paint-order, но это не работает в мобильных и IE.

Другой способ дублирования пути ... но это создаст ненужные объемы данных.

Есть ли другой способ использовать CSS, чтобы просто создать контур или границу для пути SVG?

<svg height="50" width="300"> 
    <path d="M5 20 1215 20" /> 
</svg> 

path { 
    fill: red; 
    stroke: #646464; 
    stroke-width:10px; 
    stroke-linejoin: round; 
}

Вот codepen

источник

2017-02-01 Astronaut

Я не знаю, означает ли это то, что вы подразумевали под * дублированием пути *, но почему бы просто не проследить линию от начала до конца как один путь, а затем использовать 'stroke'? – Harry

Это то, что я пытался сделать, но путь всегда полностью заполнен ... плохо создать скрипку – Astronaut

Вы должны нарисовать путь как контур, как так:

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"> 
 
    <path fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/> 
 
    <path fill="#fff" stroke="#00b400" stroke-width="4" 
 
    d="M 159.8 30.3 
 
     h -110 
 
     v 120 
 
     h-20 
 
     l 30 40 
 
      30 -40 
 
     h-20 
 
     v-100 
 
     h90"/> 
 
</svg>

Sketched в Inkscape, оптимизированной в SVGOMG затем подправили по рука.

источник

2017-02-01 16:46:43 Ruskin

Чтобы избежать полного закрытия пути, не ставьте 'z' в конец. Чтобы избежать заполнения, заполните 'fill =" transparent ". – Ruskin

Привет, Раскин, спасибо за ответ, но это не то, что я хочу. Я хочу, чтобы стиль не рисовал путь в форме стрелки. Теперь я достиг этого, используя шаблон для пути. Пример: http://resources.jointjs.com/tutorial/links-patterns – Astronaut

А ... в этом случае посмотрите https://developer.mozilla.org/en/docs/Web/SVG/Element/marker .. У меня есть вопрос об обновлении ответа – Ruskin

SVG путь с границей

ответ

Смежные вопросы