Stroke-width values using percentages render too thick
#246 opened on May 25, 2017
Description
Hello,
I am using svg-pan-zoom for some SVG data that use a percentage for path stroke-widths. (e.g. stroke-width:0.4%)
After attaching svg-pan-zoom to the SVG, the stroke widths render extremely thick.
Browsers render the SVG fine without svg-pan-zoom. I also had a teammate open the SVG in Oxygen's SVG viewer, and they were able to pan and zoom without any visual distortion to the line thickness.
I noticed that when svg-pan-zoom caches the SVG's viewBox, it then removes that attribute from the element. If you add the viewBox back, the lines render as expected. (However with my data, you do have to zoom out very far and pan around to find them again.)
I suspect that without a viewBox attribute on the SVG, the transform matrix confuses the rendering engine as to what it should be taking a percentage of.
Here is a sample page that demonstrates the core of my issue (also attached as a txt):
We render two identical SVGs side by side, and add svg-pan-zoom to the left SVG (#svg1). You (hopefully) can see the two path elements stay in the same relative position, but their stroke-width becomes greatly exaggerated. Click the button to add the viewBox attribute back to (#svg1) and set the zoom and pan to get the paths back into frame. From there you can mouse around with wheel zoom to see that the scaling stays sane.
<html>
<style type="text/css">
svg {
border-style: solid;
border-width: 4px;
}
</style>
<div style="float:left">
<svg id="svg1" width="400" height="400" viewBox="0 0 17 11" >
<path d="M1,5 L15,5" id="line1" style="stroke:black;stroke-width:0.4%;"/>
<path d="M1,7 L15,7" id="line2" style="stroke:black;stroke-width:0.06%;"/>
</svg>
</div>
<div>
<svg id="svg2" width="400" height="400" viewBox="0 0 17 11" >
<path d="M1,5 L15,5" id="line1" style="stroke:black;stroke-width:0.4%;"/>
<path d="M1,7 L15,7" id="line2" style="stroke:black;stroke-width:0.06%;"/>
</svg>
</div>
<div style="clear:both">
<button id="button">Add viewBox, then zoom out and pan</button>
</div>
<script src="svg-pan-zoom.js"></script>
<script>
var panZoom = svgPanZoom('#svg1', {
zoomEnabled: true, fit: true, center: true, controlIconsEnabled: false,
minZoom: 0
});
document.getElementById('button').addEventListener("click", function(){
document.getElementById('svg1').setAttribute("viewBox", "0 0 17 11" );
panZoom.zoom(0.07);
panZoom.panBy({x:-195, y:-195});
});
</script>
</html>
Any input is greatly appreciated!
Configuration
- svg-pan-zoom version:
v3.3.0, v3.5.1 - Browser(s):
IE11 and Firefox - Operating system(s):
Windows7