html svg pattern as brush from path stroke

-1

Я пытаюсь получить шаблон (или изображение или другой путь), чтобы действовать как «кисть» для штриха пути. Я смог получить путь к действию, как отсечение региона шаблон, но это не то, что я хочу. http://jsfiddle.net/honkskillet/Yyx3b/ (это то, что я до сих пор, не то, что я хочу)
html svg pattern as brush from path stroke

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> 
    <defs> 
     <pattern id="Pattern" x="0" y="0" width="10" height="10"> 
      <rect fill="gray" x="0" y="0" width="100" height="100"/> 
      <path id="testPath" d = "M 000 00 L 50 100 L 100 0" stroke-width = "5" stroke="black" fill="blue" /> 
    </pattern> 

    </defs> 

    <path d = "M 200 50 L 300 150 L 200 150 L 200 50" stroke-width = "20" stroke="url(#Pattern)" fill="red"> 
    </path> 

    <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="100" height="100"/> 

</svg>

Я хочу, чтобы шаблон (или изображение или другой путь), чтобы ориентироваться и черепичные вдоль направления пути. Я нашел сложный способ сделать это в javascript http://codepen.io/honkskillet/pen/AIEpF (путь по пути) , но мне было интересно, был ли чистый способ svg html выполнить это. Приветствия

EDIT

Не-HTML единственное решение нарисовать путь на пути HTML

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> 

     <path id="testpath" d = "M 50 400 Q 150 150 50 150 T150 400" stroke-width = "10" stroke="blue" fill="none" > 
    </path> 

</svg>

Javascript

var a = document.getElementById("testpath"), 
    len = a.getTotalLength(), 
    steps=20, 
    p, p1, dp, pa, pb, 
    circle; 

for(var i =0; i<steps;i++){ 
    p = a.getPointAtLength(len*i/steps); 
    p1 = a.getPointAtLength(len*(i+1)/steps); 
    dp={x: p.x-p1.x, y:p.y-p1.y}; 
    pa= {x: (0.67*p.x+0.33*p1.x)-dp.y, y:(0.67*p.y+0.33*p1.y)+dp.x}; 
    pb= {x: (0.33*p.x+0.67*p1.x)+dp.y, y:(0.33*p.y+0.67*p1.y)-dp.x}; 
    circle = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
    circle.setAttributeNS(null,"d", "M"+p.x+","+p.y+" C"+pa.x+","+pa.y+" "+pb.x+","+pb.y+" "+p1.x+","+p1.y); 
    //circle.setAttributeNS(null,"d", "M"+p.x+","+p.y+" L"+pa.x+","+pa.y+" L"+pb.x+","+pb.y+" L"+p1.x+","+p1.y); 
    circle.setAttribute("stroke-linecap","round"); 
    circle.setAttribute("stroke-width", "8"); 
    circle.setAttribute("stroke", "#336699"); 
    circle.setAttribute("fill", "none"); 

    document.getElementById("mySVG").appendChild(circle); 

}

Это нарисует кривую грех по пути ,

Мне все еще нравится решение только для SVG HTML, если оно существует.

источник

2013-11-01 honkskillet

Не удалось найти HTML-код для этого. Я действительно взломал относительно простое решение Javascript. – honkskillet

Если вы имеете в виду вы пытаетесь получить серый и синий шаблон зиг-заг, который следует за линию обводки, то нет, нет простой/автоматический способ сделать это в SVG.

источник

2013-11-02 13:45:41

Основываясь на моем исследовании поиска Google, к сожалению, я думаю, что вы правы. Я, вероятно, приму свой ответ, но я оставлю вопрос открытым на пару дней, чтобы узнать, не приходят ли какие-либо комментарии. – honkskillet

<pattern id="Pattern" x=".1" y=".1" width=".04" height=".04">

источник

2013-11-02 03:08:11

Где вы предлагаете добавить это в контексте фрагмента кода? – honkskillet

Исправить x, y, значения ширины и высоты до <1 –

Это не будет делать то, что я хочу. Я хочу, чтобы шаблон/образ/путь был разбит по пути. Как ход кисти вдоль пути. Или зигзагообразная линия, которая следует по пути. – honkskillet

html svg pattern as brush from path stroke

ответ

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