使用 css 定位 svg x/y 坐标不适用于 iOS 设备？
Posted
技术标签:
【中文标题】使用 css 定位 svg x/y 坐标不适用于 iOS 设备？【英文标题】：Positioning svg x/y coordinates with css not working with iOS devices? 【发布时间】：2016-11-20 23:21:00 【问题描述】：根据 css/svg (https://www.w3.org/TR/SVG2/styling.html) 的 W3C 样式指南，我应该能够使用 x/y 属性在 css 中定位某些 svg 元素。
这适用于 chrome + Samsung 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 忽略（我认为）并被定义（我认为）为
哦，还有，foreignObject 没有很好的跨浏览器支持。如果您的目标是良好的报道，我会考虑取消它（和handheld）
不适用于 Firefox 47/Ubuntu，但适用于 Chrome/Ubuntu
@DavidGilbertson 我尝试删除 handheld 并将 foreignObject 更改为 rect 但不幸的是，iOS 仍然存在同样的问题
@TimB 感谢您在 Firefox 上进行测试 - 修改后的帖子，当我只在 chrome 上进行测试时，我不应该认为它适用于所有浏览器
【参考方案1】：
您所指的功能是 SVG 2。SVG 2 仍处于工作草案阶段。浏览器供应商正在实现功能，但我不会将任何依赖 SVG2 功能的产品投入生产。甚至 caniuse.com 还没有引入“我可以使用 SVG 2”部分。他们是discussing it here。
现在回答你的问题:)
选项 1
如果您只想在页面周围移动整个 SVG 块，那么您可以将 HTML 用于响应式布局并在其中使用 SVG。比如：
<div class="responsive-wrapper">
<svg >
<rect x="10" y="10" />
</svg>
</div>
<div class="responsive-wrapper">
<svg >
<rect x="10" y="10" />
</svg>
</div>
然后
.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
是 javascript，更复杂，无法很好地扩展。
<svg >
<rect id="rect-1" x="10" y="10" />
</svg>
还有一些讨厌的东西，比如：
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;
);
【讨论】：
以上是关于使用 css 定位 svg x/y 坐标不适用于 iOS 设备？的主要内容，如果未能解决你的问题，请参考以下文章