by msk » Fri Jan 04, 2019 7:42 am
Hi!
Ernie wrote: If it doesn't work, it's likely an issue with mobile safari.
I thought so too, so I tried to make a iOS sample to confirm it.
I generated a project as "Single View App" on Xcode and wrote the following code.
(Yes, by googling. Though I'm able to do programming, I'm not familiar with iOS/Swift at all.)
- Code: Select all
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
var webView: WKWebView!
override func loadView() {
let webConfiguration = WKWebViewConfiguration()
webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
let path = Bundle.main.path(forResource: "test", ofType: "html") // ok
//let path = Bundle.main.path(forResource: "test2", ofType: "html") //also ok
let url = URL(fileURLWithPath: path!)
let dirUrl = url.deletingLastPathComponent()
webView.loadFileURL(url, allowingReadAccessTo: dirUrl)
}
}
And then I put html/svg/jpeg files as bundle resources.
test.html
- Code: Select all
<html>
<object type="image/svg+xml" data="test.svg">fallback text</object>
</html>
test2.html
- Code: Select all
<html>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="test.jpg" x="0" y="0" width="700" height="400"/>
<rect fill="#22EBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>
</html>
test.svg
- Code: Select all
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="test.jpg" x="0" y="0" width="700" height="400"/>
<rect fill="#FFEBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>
I run this on the iPad simulator and this succeeded to render the jpeg and rect! (in both test.html and test2.html)
So I guess the point is how you make a complete html string from "Text 1" that is raw html format.
For example, if I have a data like
- Code: Select all
<object type="image/svg+xml" data="test.svg">fallback text</object>
or
- Code: Select all
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="test.jpg" x="0" y="0" width="700" height="400"/>
<rect fill="#22EBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>
as "Text 1", what html string do you generate?
Could you show it?
I believe Image Occlusion is very useful to many people.
I do want to see this on FCD!
Thanks,
Hi!
[quote="Ernie"] If it doesn't work, it's likely an issue with mobile safari. [/quote]
I thought so too, so I tried to make a iOS sample to confirm it.
I generated a project as "Single View App" on Xcode and wrote the following code.
(Yes, by googling. Though I'm able to do programming, I'm not familiar with iOS/Swift at all.)
[code]
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
var webView: WKWebView!
override func loadView() {
let webConfiguration = WKWebViewConfiguration()
webView = WKWebView(frame: .zero, configuration: webConfiguration)
webView.uiDelegate = self
view = webView
}
override func viewDidLoad() {
super.viewDidLoad()
let path = Bundle.main.path(forResource: "test", ofType: "html") // ok
//let path = Bundle.main.path(forResource: "test2", ofType: "html") //also ok
let url = URL(fileURLWithPath: path!)
let dirUrl = url.deletingLastPathComponent()
webView.loadFileURL(url, allowingReadAccessTo: dirUrl)
}
}
[/code]
And then I put html/svg/jpeg files as bundle resources.
test.html
[code]
<html>
<object type="image/svg+xml" data="test.svg">fallback text</object>
</html>
[/code]
test2.html
[code]
<html>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="test.jpg" x="0" y="0" width="700" height="400"/>
<rect fill="#22EBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>
</html>
[/code]
test.svg
[code]
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="test.jpg" x="0" y="0" width="700" height="400"/>
<rect fill="#FFEBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>
[/code]
I run this on the iPad simulator and this succeeded to render the jpeg and rect! (in both test.html and test2.html)
So I guess the point is how you make a complete html string from "Text 1" that is raw html format.
For example, if I have a data like
[code]
<object type="image/svg+xml" data="test.svg">fallback text</object>
[/code]
or
[code]
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="test.jpg" x="0" y="0" width="700" height="400"/>
<rect fill="#22EBA2" stroke="#2D2D2D" stroke-width="0.5" x="30" y="10" width="200" height="70" />
</svg>
[/code]
as "Text 1", what html string do you generate?
Could you show it?
I believe Image Occlusion is very useful to many people.
I do want to see this on FCD!
Thanks,