根据W3C的CSS/SVG样式指南(https://www.w3.org/TR/SVG2/styling.html),我应该能够使用x/y属性在CSS中定位特定的SVG元素。
这可以在Chrome和三星Galaxy S6上使用(没有尝试其他型号/浏览器)。然而,在iOS和某些我尝试过的窗口/HTC设备上不起作用。
这是我正在使用的代码(借助d3.js);
这是代码的plnk链接。
我想知道是否有任何解决方法?或者是否有人可以推荐另一种添加x/y响应式断点的方式?
谢谢。
这可以在Chrome和三星Galaxy S6上使用(没有尝试其他型号/浏览器)。然而,在iOS和某些我尝试过的窗口/HTC设备上不起作用。
这是我正在使用的代码(借助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="d3@4.0.0" 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>
这是代码的plnk链接。
我想知道是否有任何解决方法?或者是否有人可以推荐另一种添加x/y响应式断点的方式?
谢谢。
handheld
?我认为它被iOS忽略了,并且被定义为<=320px。 - David GilbertsonforeignObject
在跨浏览器支持方面并不是很好。如果你的目标是良好的覆盖率,我会考虑放弃它(和handheld
)。 - David Gilbertsonhandheld
,并将foreignObject
更改为rect
,但不幸的是,在 iOS 上仍然存在相同的问题。 - alexc101