Skip to content

Instantly share code, notes, and snippets.

@RichTeaTime

RichTeaTime/index.html

Last active October 22, 2019 12:29
Show Gist options
  • Save RichTeaTime/b85f23cf3a13eff1ddde093df3925054 to your computer and use it in GitHub Desktop.
Save RichTeaTime/b85f23cf3a13eff1ddde093df3925054 to your computer and use it in GitHub Desktop.
Download ZIP
Chrome SVG re-layout issue
Raw
index.html
<html>
<script language="JavaScript"><!--
function onLoad() {
var canvas = document.getElementById('canvas');
var red = document.getElementById('red');
setTimeout( function() {
red.setAttribute('stroke-width', '5px');
}, 5000);
}
//--></script>
<body onLoad="onLoad()" style="margin:100px">
<!-- BROKEN: Container is auto sized: The offset appears to be == margin of the BODY in most cases -->
<div id="container" style="border:1px solid black;">
<svg id="canvas" width="80%" height="80%" viewBox="0 0 500 500" style="border:1px solid black">
<rect x="20" y="20" width="100" height="100" fill="green" />
<rect x="140" y="20" width="100" height="100" fill="blue" />
<rect x="260" y="20" width="100" height="100" fill="yellow" />
<rect x="20" y="140" width="100" height="100" fill="black" />
<rect x="140" y="140" width="100" height="100" fill="red" id="red" stroke="lime" stroke-width="6px" />
<rect x="260" y="140" width="100" height="100" fill="gray" />
<rect x="20" y="260" width="100" height="100" fill="magenta" />
<rect x="140" y="260" width="100" height="100" fill="cyan" />
<rect x="260" y="260" width="100" height="100" fill="orange" />
</svg>
</div>
<!-- BROKEN: Container is auto sized -->
<!--<div id="container" style="border:1px solid black">
<svg id="canvas" width="80%" height="80%" viewBox="0 0 500 500" style="border:1px solid black">
<rect x="20" y="20" width="100" height="100" fill="green" />
<rect x="140" y="20" width="100" height="100" fill="blue" />
<rect x="260" y="20" width="100" height="100" fill="yellow" />
<rect x="20" y="140" width="100" height="100" fill="black" />
<rect x="140" y="140" width="100" height="100" fill="red" id="red" stroke="lime" stroke-width="10px" />
<rect x="260" y="140" width="100" height="100" fill="gray" />
<rect x="20" y="260" width="100" height="100" fill="magenta" />
<rect x="140" y="260" width="100" height="100" fill="cyan" />
<rect x="260" y="260" width="100" height="100" fill="orange" />
</svg>
</div>
-->
<!--
Container with an assigned size appears to prevent the issue
-->
<!--
<div id="container" style="width:300px; height:300px; border:1px solid black">
<svg id="canvas" width="80%" height="80%" viewBox="0 0 500 500" style="border:1px solid black">
<rect x="20" y="20" width="100" height="100" fill="green" />
<rect x="140" y="20" width="100" height="100" fill="blue" />
<rect x="260" y="20" width="100" height="100" fill="yellow" />
<rect x="20" y="140" width="100" height="100" fill="black" />
<rect x="140" y="140" width="100" height="100" fill="red" id="red" stroke="lime" stroke-width="10px" />
<rect x="260" y="140" width="100" height="100" fill="gray" />
<rect x="20" y="260" width="100" height="100" fill="magenta" />
<rect x="140" y="260" width="100" height="100" fill="cyan" />
<rect x="260" y="260" width="100" height="100" fill="orange" />
</svg>
</div> -->
<!--
Even % width/height on container appears to heal it
-->
<!--
<div id="container" style="width:50%; height:50%; border:1px solid black; overflow:auto">
<svg id="canvas" width="180%" height="180%" viewBox="0 0 500 500" style="border:1px solid black">
<rect x="20" y="20" width="100" height="100" fill="green" />
<rect x="140" y="20" width="100" height="100" fill="blue" />
<rect x="260" y="20" width="100" height="100" fill="yellow" />
<rect x="20" y="140" width="100" height="100" fill="black" />
<rect x="140" y="140" width="100" height="100" fill="red" id="red" stroke="lime" stroke-width="10px" />
<rect x="260" y="140" width="100" height="100" fill="gray" />
<rect x="20" y="260" width="100" height="100" fill="magenta" />
<rect x="140" y="260" width="100" height="100" fill="cyan" />
<rect x="260" y="260" width="100" height="100" fill="orange" />
</svg>
</div>
-->
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment