Я хотел бы создать строки со следующим эффектом:
Выше было создано следующее:
<svg id="svg_wrp" width="500" height="500">
<defs>
<filter id="crayon">
<feTurbulence
type="fractalNoise"
baseFrequency="1.001"
numOctaves="10"
result="noise">
</feTurbulence>
<feDisplacementMap
xChannelSelector="R"
yChannelSelector="G"
scale="50"
in="SourceGraphic"
result="newSource">
</feDisplacementMap>
<feGaussianBlur stdDeviation="1.1"/>
</filter>
</defs>
<polyline
points="200,100 100,200"
stroke="#000"
stroke-width="10"
fill="none"
filter=url(#crayon) ></polyline>
</svg>
Выше в Fiddle
Этот метод не работает для большей части того, что я хочу сделать. Эффект меняется в зависимости от длины и направления линии.
Единственный способ, которым я могу думать об этом, - заменить все линии на многоугольники. Тогда это будет прямое использование фильтров. Но тогда мне нужно было бы создать сложный многоугольник со всеми вычислениями для каждого угла и кривой.
Поэтому, прежде чем я сделаю это, я хотел бы знать, есть ли способ достичь вышеупомянутого с помощью полилиний svg или некоторых других. другой метод.
Редактировать: Ответ Майкла Маллани разрешил проблему только вертикальной и горизонтальной линий, но у меня все еще есть проблемы с эффектом, отличающимся на некоторых линиях, см. пример ниже. Эффект уведомления уменьшается в левом верхнем углу. Есть ли способ оказывать последовательное влияние на все линии?
