使用css定位svg x/y坐标不适用于iOS设备？

根据W3C css/svg样式指南（），我应该能够使用x/y属性在css中定位某些svg元素

这适用于chrome+三星Galaxy S6（其他型号/浏览器未试用）。但是，这在iOS和我尝试过的一些window/htc设备中不起作用

下面是我正在使用的代码（在d3.js的帮助下）

@手持媒体，
屏幕和屏幕（最大宽度：425px）{
外物{
x:30；
y:30；
}
}
d3.选择全部（“主体”）
.append（“svg”）
.append（“外来对象”）
.attr（“宽度”，30）
.attr（“高度”，30）
.attr（'x'，0）
.attr（'y'，0）
.html（“你好”）

下面是代码的一部分

我想知道有没有什么解决办法？或者是否有人可以推荐另一种为x/y添加响应断点的方法

---

谢谢

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

现在回答你的问题：）

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

选择二

是JavaScript，更为复杂，无法很好地扩展

<svg width="100%" height="200">
  <rect id="rect-1" x="10" y="10" height="200" width="200"/>
</svg>

---

为什么您有

手持设备

？它被iOS忽略了（我认为），并且被定义为（我认为）Oh，

foreignObject

没有很好的跨浏览器支持。如果你的目标是好的覆盖率，我会考虑取消它（和

掌上电脑

）不适用于Firefox 47/Ubuntu，但适用于Chrome/Ubuntu@DavidGilbertson我已尝试删除手持设备，并将其更改为rect，但iOS仍然存在同样的问题unfortunately@TimB感谢您在Firefox-modified post上进行测试，当我只在chrome上测试时，我不应该认为它可以在所有浏览器上运行

.responsive-wrapper {
  border: 1px dashed lightgray;
  width: 100%;
}

@media screen and (min-width: 500px) {
  .responsive-wrapper {
    float: left;
    width: 48%;
  }
}

rect {
  fill: steelblue;
}

<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;
  }
});