移动 Safari SVG 问题 [英] Mobile Safari SVG Problem

查看：34 发布时间：2021/12/17 18:42:02 iphone svg mobile-safari

本文介绍了移动 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"><头><title>SVG iPhone 测试</title><身体><div><svg width="500" height="220"><rect x="2" y="2" width="496" height="216" stroke="#000"stroke-width="2px" fill="transparent"></rect></svg>

解决方案

将 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"><头><title>SVG iPhone 测试</title><身体><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>

http://www.invalidpage.com/svg/svgtest.html 传递的 HTTP MIME 类型是内容类型:文本/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">

也可以使用；这就是 Ipad svg 示例中显示的内容.当文档作为 XML 而非 HTML 交付时，它应该以 <xml version="1.0" standalone="no">;

开头

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

I'm trying to get an SVG image to show up on my iPhone (or iPad) default browser, but I can't seem to get even just a rect to show up.

Example at: http://www.invalidpage.com/svg/svgtest.html

Source:

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

解决方案

Add xmlns="http://www.w3.org/2000/svg" version="1.1" to your svg tag.

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

The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is "Content-Type: text/html". HTML inline svg works with the MIME type "Content-Type: text/xml" You can create this by ending the document with XML instead of HTML as they have done here.

Not sure if Ipad cares about the Content-Type but other browsers do.

Updated

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

Can also be used; It is what is being shown on the Ipad svg examples. When the document is delivering as an XML not HTML, it should start with <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>

这篇关于移动 Safari SVG 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

移动 Safari SVG 问题 [英] Mobile Safari SVG Problem

问题描述

相关文章

移动开发最新文章

热门教程

热门工具

登录关闭

移动 Safari SVG 问题 [英] Mobile Safari SVG Problem

问题描述

相关文章

移动开发最新文章

热门教程

热门工具

登录 关闭

登录关闭