Question

我正在尝试加载本地（不是从服务器提供）HTML文件，其中包含嵌入式SVG。 HTML看起来像这样：

<!DOCTYPE html>
<html style="overflow: hidden">
  <head>
    <meta charset="UTF-8">
    <title>icon_people_search</title>
  </head>

  <body style="overflow: hidden; ">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 72 72" xml:space="preserve">

      <path class="st0" d="M46.1,51c-4.9,0-9.5-1.9-12.9-5.4c-3.5-3.5-5.4-8-5.4-12.9s1.9-9.5,5.4-12.9c0.7-0.7,1.5-1.3,2.3-1.9
            c-2.5-3.4-6.6-5.6-11.2-5.6c-7.6,0-13.7,6-13.7,13.4c0,5,2.8,9.5,7,11.8C7.5,40.5,0.2,50,0.2,60h48.1c0-3-0.7-6.1-1.9-8.8
            C46.3,51.2,46.2,51,46.1,51z"/>

      <path class="st0" d="M71.8,52.3L59.5,40c3.2-5.8,2.4-13.3-2.6-18.3c-6-6-15.7-6-21.7,0s-6,15.7,0,21.7c4.9,4.9,12.4,5.8,18.3,2.6
            l12.3,12.3L71.8,52.3z M40.3,38.4c-3.2-3.2-3.2-8.4,0-11.7c3.2-3.2,8.4-3.2,11.7,0c3.2,3.2,3.2,8.4,0,11.7
            C48.8,41.7,43.5,41.7,40.3,38.4z"/>

      </svg>
  </body>
</html>

HTML在Mac OS X上的Firefox，Chrome和Safari中正确显示。它也可以在Android 4及以上版本WebView上正确显示。

但是，使用WKWebView和Swift在iOS 8上显示不。似乎没有任何错误。 WKWebView只显示为空白框。

知道为什么它不能正常工作，以及如何让它发挥作用？我已经看到了iOS的一些示例，其中使用<embed>或<object>标记嵌入了SVG，但我需要SVG如上所示内联，以便可以使用JavaScript /操作它jQuery更改SVG中元素的填充颜色。

任何想法，想法或例子？

Answer 1

在面向iOS 9 SDK的WKWebView中正常工作。也许你的字符串HTML格式有问题？确保你逃避所有双引号字符并设置你的baseUrl。

let webview = WKWebView(frame: self.view.frame)
self.view.addSubview(webview)
self.view.bringSubviewToFront(webview)

let html = "<!DOCTYPE html><html style=\"overflow: hidden\"><head><meta charset=\"UTF-8\"><title>icon_people_search</title></head><body style=\"overflow: hidden; \"><svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 72 72\" xml:space=\"preserve\"><path class=\"st0\" d=\"M46.1,51c-4.9,0-9.5-1.9-12.9-5.4c-3.5-3.5-5.4-8-5.4-12.9s1.9-9.5,5.4-12.9c0.7-0.7,1.5-1.3,2.3-1.9c-2.5-3.4-6.6-5.6-11.2-5.6c-7.6,0-13.7,6-13.7,13.4c0,5,2.8,9.5,7,11.8C7.5,40.5,0.2,50,0.2,60h48.1c0-3-0.7-6.1-1.9-8.8C46.3,51.2,46.2,51,46.1,51z\"/><path class=\"st0\" d=\"M71.8,52.3L59.5,40c3.2-5.8,2.4-13.3-2.6-18.3c-6-6-15.7-6-21.7,0s-6,15.7,0,21.7c4.9,4.9,12.4,5.8,18.3,2.6l12.3,12.3L71.8,52.3z M40.3,38.4c-3.2-3.2-3.2-8.4,0-11.7c3.2-3.2,8.4-3.2,11.7,0c3.2,3.2,3.2,8.4,0,11.7C48.8,41.7,43.5,41.7,40.3,38.4z\"/></svg></body></html>"

webview.loadHTMLString(html, baseURL: NSBundle.mainBundle().bundleURL)

screenshot

iOS：WKWebView不显示SVG

1 个答案: