移动Safari SVG问题

Question

移动Safari SVG问题

我正在尝试将SVG图像显示在我的iPhone(或iPad)默认浏览器上,但我似乎无法只显示一个矩形.

示例:http://www.invalidpage.com/svg/svgtest.html

资源:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
  <body>
    <div>
      <svg width="500" height="220">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Way*_*yne 40

添加xmlns="http://www.w3.org/2000/svg" version="1.1"到您的svg标签.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
<body >
      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>


</body>
</html>

Run Code Online (Sandbox Code Playgroud)

由http://www.invalidpage.com/svg/svgtest.htmlis 传递的HTTP MIME类型"Content-Type: text/html".HTML内嵌SVG工作原理与MIME类型"Content-Type: text/xml",您可以用XML来代替HTML结束的文档,因为他们已经创造这个在这里完成.

不确定Ipad是否关心Content-Type其他浏览器.

更新

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Run Code Online (Sandbox Code Playgroud)

也可以用; 这是在Ipad svg示例中显示的内容.当文档作为XML而不是HTML传递时,它应该以<xml version="1.0" standalone="no">;

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


      <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Aar*_*uss 7

想想我会在这里解决这个问题,尽管它主要与标题有关.

除了iOS之外,我的SVG标签在每个浏览器(甚至是IE9 +)中都能正确呈现所有内容.我将svg的css高度设置为100%,这在任何地方都有效,但在iOS上它似乎是整个页面高度的100%,而不仅仅是它的父元素!这导致我的内部SVG元素在其视口之外渲染.

添加position: absolute到svg标签修复了我的问题,并在iOS和其他任何地方正确呈现(父元素已经定位,所以这并没有改变svg的实际位置).其他位置风格也可以起作用.

Answer 3

asg*_*eo1 5

我之前也遇到过移动Safari的问题.你可以做的是通过javascript将SVG加载到DOM中:

$(document).ready(function(){
    var svg = '<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect></svg>';
    var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));

    $('body').html(chart);
);

Run Code Online (Sandbox Code Playgroud)

这只是一个例子 - 显然你不会将SVG存储在类似实际的字符串中.

您可以通过ajax从服务器检索SVG字符串,然后根据需要使用上述方法加载到DOM中.

归档时间：	14 年，12 月前
查看次数：	53467 次
最近记录：	6 年，7 月前