SVG reduced path with fill pattern

G

Guile

Guest
I try to draw a shape with a path that must be reduced like in this solution Find Parallel or Offset SVG path I use the filter "erode" but with pattern it doesn't work : the pattern is deformed.

Is there a way to do this without the bezier.js solution, with pure SVG/CSS ?

Here is a sample of my problem I want to have the shape of the right with the pattern of the left.


<!DOCTYPE html>
<html>
<body>
<svg>
<defs>
<pattern id="circ" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
<rect fill="blue" width="100%" height="100%" />
<circle cx="10" cy="10" r="10" fill="green" />
</pattern>
<filter id="erode">
<feMorphology in="SourceGraphic" operator="erode" radius="10"/>
</filter>
<path id="thing" d="M 0,0 H 50 A 35,35 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z" />
</defs>
<use href="#thing" fill="url(#circ)" width="400" height="400" filter="#erode"/>
<use x="100" href="#thing" filter="url(#erode)" fill="url(#circ)" width="400" height="400" />
</svg>
</body>
</html>

Continue reading...
 
Top