ctx.createPattern(img, 'repeat'); doesn't work

[murkle]

See attached SVG (zipped) - SVG patterns don't repeat when the pattern is a PNG so the following doesn't work:

var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;

Possible workarounds:

• the calling program needs to tile with a large enough bitmap
• canvas2svg could extend the bitmap and embed a larger version

noTilingWithPng.zip

[murkle]

Note, this seems important to get this working
pattern.setAttribute("patternUnits", "userSpaceOnUse");

[murkle]

Another workaround - this allows an SVG 'd' tag to be sent directly. Not very elegant but produces SVGs with nice filling!

    ctx.prototype.createPatternSVG = function (image, repetition) {
        var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
            path;
        pattern.setAttribute("id", id);
        pattern.setAttribute("width", image.width);
        pattern.setAttribute("height", image.height);
        pattern.setAttribute("patternUnits", "userSpaceOnUse");
        // eg patternTransform="rotate(35)"
        // don't need to include for undefined or zero!
        if (image.angle) {
        	pattern.setAttribute("patternTransform", "rotate("+image.angle+")");
        }
        if (image.path && image.style) {
        	// assume SVG fill pattern
        	path = this.__document.createElementNS("http://www.w3.org/2000/svg", "path");
        	// eg
        	//path.setAttribute("d", "M34.64101615137754,40.0L34.64101615137754,80.0L0.0,100.0L0.0,120.0M34.64101615137754,80.0L69.28203230275508,100.0L69.28203230275508,120.0M0.0,0.0L0.0,20.0L34.64101615137754,40.0L69.28203230275508,20.0L69.28203230275508,0.0")
        	path.setAttribute("d", image.path);
        	// eg
        	//path.setAttribute("style", "stroke:black; stroke-width:1");
        	path.setAttribute("style", image.style);
        	path.setAttribute("fill", image.fill);
        	pattern.appendChild(path);
        	this.__defs.appendChild(pattern);
        }
        return new CanvasPattern(pattern, this);
    };

[murkle]

Sorry, I seem to be wrong about PNGs not repeating. Proof:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="973" height="584">
<defs><pattern id="vgzEpOfgtorW" width="18" height="18" patternUnits="userSpaceOnUse">
<image width="18" height="18" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAA7klEQVR42mNgQAP////ff+nSpZv4MEgNAyEAVHQmLS3tPz4MUjOSDMIWuIQMwhr4IKKuru4rIc24MEgvzCDjO3fuXMvLy/tDqiEgPSC9IDNg3iveu3fvfVIN2rp16yOQXvSwWtbf3/+eWENAakF6sAW61KdPnw6VlZX9JGQISA1ILUgPrqj3BfmZmFgDqSWUjhpWrVr1DJchIDmgmh5iEiQvEG9ua2v7hG4ISAwkB1LDQAwAKlR78eLFJeQkAWKDxEByDKQAoIa0kydP3oEZBGKDxBjIAUCNMxcuXPgShEFsBnIBKCxA0QyNarzhAgAeBRQ1cQDe3AAAAABJRU5ErkJggg=="/>
</pattern>
</defs>
<g transform="scale(1,1)">
<rect fill="rgb(255,255,255)" stroke="none" x="0" y="0" width="973" height="584" fill-opacity="1"/>
<path fill="url(#vgzEpOfgtorW)" stroke="none" paint-order="stroke fill markers" d=" M 317.05602095539894 171 C 317.05602095539894 235.09597049970984 265.0959704997098 287.056020955399 201 287.056020955399 C 136.90402950029016 287.056020955399 84.94397904460105 235.09597049970984 84.94397904460105 171 C 84.94397904460105 106.90402950029015 136.90402950029016 54.943979044600994 201 54.943979044600994 C 265.0959704997098 54.943979044600994 317.05602095539894 106.90402950029015 317.05602095539894 171 Z"/>
</g>
</svg>

[murkle]

so the nice simple fix is just to add
pattern.setAttribute("patternUnits", "userSpaceOnUse");after
pattern.setAttribute("height", image.height);in createPatternSVG() 😄