【问题标题】：Positioning svg x/y coordinates with css not working with iOS devices?使用 css 定位 svg x/y 坐标不适用于 iOS 设备？
【发布时间】：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 上进行测试时，我不应该认为它适用于所有浏览器

标签： ios css d3.js svg responsive-design

【解决方案1】：

您所指的功能是 SVG 2。SVG 2 仍处于工作草案阶段。浏览器供应商正在实现功能，但我不会将任何依赖 SVG2 功能的产品投入生产。甚至 caniuse.com 还没有引入“我可以使用 SVG 2”部分。他们是discussing it here。

现在回答你的问题:)

选项 1

如果您只想在页面周围移动整个 SVG 块，那么您可以将 HTML 用于响应式布局并在其中使用 SVG。比如：

  <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>

然后

.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 width="100%" height="200">
  <rect id="rect-1" x="10" y="10" height="200" width="200"/>
</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;
  }
});

【讨论】：