Menu
According to the W3C styling guide for css/svg (https://www.w3.org/TR/SVG2/styling.html) I should be able to position certain svg elements within css using the x/y attributes.
This works with chrome + the Samsung Galaxy S6 (not tried other models/browsers). However, this doesn't work in iOS and some window/htc devices that I've tried.
Here is the code I'm using (with the help of d3.js);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">
<script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
<style>
@media handheld,
screen and (max-width: 425px) {
foreignObject {
x: 30;
y: 30;
}
}
</style>
</head>
<body>
<script>
d3.selectAll("body")
.append("svg")
.append("foreignObject")
.attr("width", 30)
.attr("height", 30)
.attr('x', 0)
.attr('y', 0)
.html("hello")
</script>
</body>
</html>
Here is a plnk of the code also.
I was wondering if there was any kind of workaround for this? or if someone could recommend another way of adding responsive breakpoints for the x/y?
Thanks
575
asked Oct 15 '25 18:10
The feature you're referring to is SVG 2. SVG 2 is still in Working Draft stage. Browser vendors are implementing features, but I wouldn't put anything into production that relied on SVG2 features. Even caniuse.com hasn't introduced a 'can i use SVG 2' section yet. They're discussing it here.
Now to answer your question :)
If you only want to move whole SVG chunks around the page, then you can use HTML for your responsive layout and SVG within that. Something like:
<div class="responsive-wrapper">
<svg width="100%" height="200">
<rect x="10" y="10" height="200" width="200"/>
</svg>
</div>
<div class="responsive-wrapper">
<svg width="100%" height="200">
<rect x="10" y="10" height="200" width="200"/>
</svg>
</div>
Then
.responsive-wrapper {
border: 1px dashed lightgray;
width: 100%;
}
@media screen and (min-width: 500px) {
.responsive-wrapper {
float: left;
width: 48%;
}
}
rect {
fill: steelblue;
}
https://jsbin.com/xesuma/1
is JavaScript, is more complex, and isn't going to scale well.
<svg width="100%" height="200">
<rect id="rect-1" x="10" y="10" height="200" width="200"/>
</svg>
and something kinda nasty like:
var rect1El = document.getElementById('rect-1');
var currentWidth = rect1El.getAttribute('width');
window.addEventListener('resize', function() {
var newWidth = window.innerWidth > 400 ? 300 : 100;
if (newWidth !== currentWidth) {
rect1El.setAttribute('width', newWidth);
currentWidth = newWidth;
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
