选项1

Question

根据css / svg（https://www.w3.org/TR/SVG2/styling.html）的W3C样式指南，我应该能够使用x / y属性在css中定位某些svg元素。

这适用于chrome + Samsung Galaxy S6（未尝试其他型号/浏览器）。但是，这在iOS和我尝试过的一些window / 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添加响应断点？

由于

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

定位svg x / y坐标与css不兼容iOS设备？

1 个答案:

选项1

选项二