search

fskpf / svg2roughjs

Create sketchy, hand-drawn-like images from SVGs
https://fskpf.github.io/
MIT License
153 stars 13 forks source link

preserveAspectRatio is not considered properly #78

Closed fskpf closed 2 years ago

fskpf commented 2 years ago

By default, preserverAspectRatio scales the viewport from the center because the default ist xMidYMid. The current implementation works differently somehow.

Try the following snippet (excerpt of a mermaid SVG) that applies a viewbox scaling.

<svg id="graph-div" width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="60" style="max-width: 170.984375px;" viewBox="0 0 170.984375 60">
    <style>#graph-div {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#graph-div .error-icon{fill:hsl(220.5882352941, 100%, 98.3333333333%);}#graph-div .error-text{fill:rgb(8.5000000002, 5.7500000001, 0);stroke:rgb(8.5000000002, 5.7500000001, 0);}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:#0b0b0b;stroke:#0b0b0b;}#graph-div .marker.cross{stroke:#0b0b0b;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#graph-div .cluster-label text{fill:rgb(8.5000000002, 5.7500000001, 0);}#graph-div .cluster-label span{color:rgb(8.5000000002, 5.7500000001, 0);}#graph-div .label text,#graph-div span{fill:#333;color:#333;}#graph-div .node rect,#graph-div .node circle,#graph-div .node ellipse,#graph-div .node polygon,#graph-div .node path{fill:#fff4dd;stroke:hsl(40.5882352941, 60%, 83.3333333333%);stroke-width:1px;}#graph-div .node .label{text-align:center;}#graph-div .node.clickable{cursor:pointer;}#graph-div .arrowheadPath{fill:undefined;}#graph-div .edgePath .path{stroke:#0b0b0b;stroke-width:2.0px;}#graph-div .flowchart-link{stroke:#0b0b0b;fill:none;}#graph-div .edgeLabel{background-color:hsl(-79.4117647059, 100%, 93.3333333333%);text-align:center;}#graph-div .edgeLabel rect{opacity:0.5;background-color:hsl(-79.4117647059, 100%, 93.3333333333%);fill:hsl(-79.4117647059, 100%, 93.3333333333%);}#graph-div .cluster rect{fill:hsl(220.5882352941, 100%, 98.3333333333%);stroke:hsl(220.5882352941, 60%, 88.3333333333%);stroke-width:1px;}#graph-div .cluster text{fill:rgb(8.5000000002, 5.7500000001, 0);}#graph-div .cluster span{color:rgb(8.5000000002, 5.7500000001, 0);}#graph-div div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(220.5882352941, 100%, 98.3333333333%);border:1px solid undefined;border-radius:2px;pointer-events:none;z-index:100;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style>
    <g>
        <g class="output">
            <g class="clusters"/>
            <g class="edgePaths"/>
            <g class="edgeLabels"/>
            <g class="nodes">
                <g class="node default" id="flowchart-A-126" style="opacity: 1;">
                    <rect x="0" y="0" width="154.984375" height="44" class="label-container"/>
                </g>
            </g>
        </g>
    </g>
</svg>

The resulting sketch is scaled non-uniformly and when an additional translation is added to the above viewBox, things even get worse.

I think we should at least support the default correctly (scaling uniformly from the center), but also support preverAspectRatio="none" with is almost what we have already. IIRC, the current implementation is just a workaround until the given test-cases worked, so this may be the culprit to begin with.