Skip to content

Instantly share code, notes, and snippets.

@micmro

micmro/fix-flex-svg-panels.html

Last active December 28, 2017 10:35
Show Gist options
  • Save micmro/2d3da8e6d4ac13687dca to your computer and use it in GitHub Desktop.
Save micmro/2d3da8e6d4ac13687dca to your computer and use it in GitHub Desktop.
Download ZIP
SVG with both fixed width (pixel) and flexible with (percentage) panels combined - https://jsfiddle.net/4xuLyvj9/ - does not work in IE/Edge due to lack of support for SVG in `foreignObject`
Raw
fix-flex-svg-panels.html
<html>
<body>
<svg width="100%" height="250" xmlns="http://www.w3.org/2000/svg">
<foreignObject id="fixed-panel" width="100" height="100%">
<svg width="100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100%" fill="#fcc" rx="5" ry="5"/>
<text x="5%" y ="25" width="100" fill="#333">fixed width</text>
</svg>
</foreignObject>
<foreignObject id="flex-panel" width="100%" height="100%" style="padding-left:100px;">
<svg width="100%" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" rx="5" ry="5" fill="#cfc" />
<text x="5%" y ="25" fill="#333">variable width</text>
</svg>
</foreignObject>
</svg>
</body>
</html>
@micmro
Copy link
Author

micmro commented Jan 3, 2016

If you're ok to have the fixed with element in HTML you can get it working in MS Edge as well: https://jsfiddle.net/a12x9c56/10/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment