svg2pdf.js
svg2pdf.js copied to clipboard
yWorks
Enlarged patterns (defs)
Hello, there was such a problem, when exporting to PDF, the patterns increase. Previously, when there was no nesting of svg elements, everything worked fine. Thanks in advance for your reply.
Approximate
but in pdf it looks like this
html example: `
</pattern></g></defs><svg viewBox="-55000 -27127.5 110000 54255"><g etype="TObjects" preserveAspectRatio="xMidYMid slice" transform="translate(-11297.527168696479,-15757.224331464979)"><g etype="TScene"><svg id="svg0" class="" x="2400" y="900" width="38700" height="22400" style="opacity: 0.9;"><g id="bim_257" transform=""><path stroke-width="7" fill="white" stroke="transparent" defStroke="transparent" defColor="white" d="M2748.25,18130.53 L4055.45,18130.53 L4055.45,4370.53 L2748.25,4370.53Z"></path><path stroke-width="7" fill="url(#hatch_257_0)" stroke="transparent" defStroke="transparent" defColor="url(#hatch_257_0)" d="M2748.25,18130.53 L4055.45,18130.53 L4055.45,4370.53 L2748.25,4370.53Z"></path><line stroke-width="7" stroke="rgb(0,0,0)" x1="2748.25" x2="4055.45" y1="18130.53" y2="18130.53"></line><line stroke-width="7" stroke="rgb(0,0,0)" x1="4055.45" x2="4055.45" y1="18130.53" y2="4370.53"></line><line stroke-width="7" stroke="rgb(0,0,0)" x1="4055.45" x2="2748.25" y1="4370.53" y2="4370.53"></line><line stroke-width="7" stroke="rgb(0,0,0)" x1="2748.25" x2="2748.25" y1="4370.53" y2="18130.53"></line></g></svg></g></g></svg></svg>`
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1920" height="947" style="transition: all 2s ease 0s; background: white;"> <defs> <g id="bim_defs_257"> <pattern id="hatch_257_0" patternUnits="userSpaceOnUse" width="60" height="60" stroke="rgb(170,170,170)" stroke-width="5"> <path id="SvgjsPath1010" d="M 48,0 L 0,48 M 60,12 L 12,60 M 60,48 L 48,60 M 12,0 L 0,12" stroke-width="2"></path> </pattern> </g> </defs> <svg viewBox="-55000 -27127.5 110000 54255"> <g etype="TObjects" preserveAspectRatio="xMidYMid slice" transform="translate(-11297.527168696479,-15757.224331464979)"> <g etype="TScene"> <svg id="svg0" class="" x="2400" y="900" width="38700" height="22400" style="opacity: 0.9;"> <g id="bim_257" transform=""> <path stroke-width="7" fill="white" stroke="transparent" defStroke="transparent" defColor="white" d="M2748.25,18130.53 L4055.45,18130.53 L4055.45,4370.53 L2748.25,4370.53Z"></path> <path stroke-width="7" fill="url(#hatch_257_0)" stroke="transparent" defStroke="transparent" defColor="url(#hatch_257_0)" d="M2748.25,18130.53 L4055.45,18130.53 L4055.45,4370.53 L2748.25,4370.53Z"></path> <line stroke-width="7" stroke="rgb(0,0,0)" x1="2748.25" x2="4055.45" y1="18130.53" y2="18130.53"></line> <line stroke-width="7" stroke="rgb(0,0,0)" x1="4055.45" x2="4055.45" y1="18130.53" y2="4370.53"></line> <line stroke-width="7" stroke="rgb(0,0,0)" x1="4055.45" x2="2748.25" y1="4370.53" y2="4370.53"></line> <line stroke-width="7" stroke="rgb(0,0,0)" x1="2748.25" x2="2748.25" y1="4370.53" y2="18130.53"></line> </g> </svg> </g> </g> </svg> </svg>
I found the problem, the width/height attributes affect the patterns, I don't know if this is a bug or a feature.
Ideally, if the SVG spec produces one result, and the browsers agree on this, this should also be replicated in PDF. So if it doesn't, it's a bug. Whether this is feasible to resolve and whether this is a bug in JSPDF or in SVG2PDF is a different question, I cannot answer at the moment.
The specification says, width and height should affect the pattern: https://www.w3.org/TR/SVG2/pservers.html#PatternElementXAttribute
‘x’, ‘y’, ‘width’ and ‘height’ indicate how the pattern tiles are placed and spaced. These attributes represent coordinates and values in the coordinate space specified by the combination of attributes ‘patternUnits’ and ‘patternTransform’.
It could be that the patternUnits attribute is interpreted wrongly.
I think Daniel Bretzigheimer and me fixed this in the PR for https://github.com/yWorks/svg2pdf.js/issues/212. Several fixes related to Patterns are cobbled up in that PR, so try if that fixes it.
