Question

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-15 -15 56 80'><path d='M 16.858655,50 V 27.192245 h 7.665842 l 1.147793,-8.887827 h -8.813456 v -5.674363 c 0,-2.573533 0.716046,-4.3274238 4.41032,-4.3274238 l 4.713297,-0.0015 V 0.35099374 C 25.167627,0.24176784 22.370432,3.46934e-7 19.11473,3.46934e-7 12.319565,3.46934e-7 7.6680488,4.1432288 7.6680488,11.749759 v 6.554627 H -0.017549 v 8.887827 h 7.6854185 v 22.807754 z' fill='#f7f7f7' /></svg>");

div {
  height: 150px;
  width: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-15 -15 56 80'><path d='M 16.858655,50 V 27.192245 h 7.665842 l 1.147793,-8.887827 h -8.813456 v -5.674363 c 0,-2.573533 0.716046,-4.3274238 4.41032,-4.3274238 l 4.713297,-0.0015 V 0.35099374 C 25.167627,0.24176784 22.370432,3.46934e-7 19.11473,3.46934e-7 12.319565,3.46934e-7 7.6680488,4.1432288 7.6680488,11.749759 v 6.554627 H -0.017549 v 8.887827 h 7.6854185 v 22.807754 z' fill='#f7f7f7' /></svg>");
}

<div></div>

使用上述风格，桌面浏览器（Chrome，Firefox）正确显示我的元素，但移动浏览器（Chrome，Firefox）不显示任何内容。对于这种差异是否有一些已知问题，或者我在这里做了一些完全错误的事情？

Answer 1

添加网址时，所有保留的字符都必须进行转义，因此字符public void KeyboardWillShow(UIKeyboardEventArgs KeyboardArgs, UIView uiResponderView) { if (ScrollView != null) { if (uiResponderView != null) { UIEdgeInsets contentInsets = new UIEdgeInsets(0.0f, 0.0f, KeyboardArgs.FrameEnd.Height, 0.0f); ScrollView.ContentInset = contentInsets; ScrollView.ScrollIndicatorInsets = contentInsets; CGRect tableViewRect = ScrollView.Frame; tableViewRect.Height -= KeyboardArgs.FrameEnd.Height; if (!tableViewRect.Contains(uiResponderView.Frame.Location)) { ScrollView.ScrollRectToVisible(uiResponderView.Frame, true); } } } }变为#：

%23

到

fill='#f7f7f7'

这种方式适用于所有浏览器。

在手机上查看： https://jsfiddle.net/q1g1pj13/2/

在这里，我用浅色调换了你的浅灰色（你在jsfiddle上几乎看不见）： https://jsfiddle.net/q1g1pj13/3/

内联SVG无法在移动浏览器上显示

1 个答案: