根據W3C的css/svg樣式指南（https://www.w3.org/TR/SVG2/styling.html），我應該能夠使用x/y屬性在css中定位某些svg元素。使用css不能與iOS設備一起定位svg 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="[email protected]" 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添加響應斷點的方法？

感謝

來源

2016-07-18 alexc101

爲什麼你'handheld'？它被iOS忽略（我認爲），被定義（我認爲）爲<= 320px。 –

另外，'foreignObject'沒有很好的跨瀏覽器支持。如果你的目標是良好的覆蓋面，我會考慮廢除它（和「手持」） –

不適用於Firefox 47/Ubuntu但適用於Chrome/Ubuntu –

你指的特點是SVG 2. SVG 仍處於工作草案階段。瀏覽器廠商正在實現功能，但我不會投入任何依賴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; 
    } 
});

來源

2016-07-18 22:56:44

啊好的謝謝你的答案！ – alexc101

使用css不能與iOS設備一起定位svg x/y座標？

回答

選項1

選擇二

相關問題