пытается использовать D3 & foreignObject для вставки обертывания текста в svg. Текстовые дисплеи отображаются в настольных браузерах, но не в мобильных браузерах.SVG foreignObject текст не отображается в мобильных браузерах
Живая пятна:
https://s3.amazonaws.com/WorkMalawskey/charter_money.html
Bin:
http://jsbin.com/hometutiqi/1/edit?html,output
Любые идеи, что я не хватает? Я предполагаю, что это что-то простое и глупое.
Хорошо, это похоже на то, что D3 вызывает объекты ForeignObjects, поскольку встроенный объект externalObject выглядит правильно загружен в мобильном браузере. Т.е .:
<foreignObject x="60" y="60" width="180" height="180">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<ul>
<li><strong>WHY NOT WORKING??</strong></li>
</ul>
</div>
</body>
</foreignObject>
в противоположность:
var d1text2 = svg.append("foreignObject")
.html("<center>WHY NOT WORKING??</center>")
.attr("x", 10)
.attr("y", 15)
.attr("width", 170)
.attr("height", 150)
.attr("visibility", "hidden")
.attr("class","text3")
.attr("fill", "black");
Так может быть, я буду просто работать вокруг него таким образом.
Хорошо, если это видимость = «скрытая», неудивительно, что вы не можете ее увидеть. –
haha yeah :-), но я думаю, что это также связано с отсутствующей декларацией «xhtml». Следующий код работает правильно:
var d2default = svg.append("foreignObject")
.attr({ 'x': 210, 'y': 15, 'width': 78, 'height': 55, 'class': 'text' });
var div2d1 = d2default.append('xhtml:div')
.append('div');
div2d1.append('p')
.html('<center><b>Fighting Chance Pa</b></center>');
Предположительно, они не реализуют поддержку foreignObject. –
Да, это то, о чем я так думал, но это будет означать, что они делают: http://caniuse.com/#search=foreignObject –
И вот пример, который отображается в мобильных браузерах .... http: // starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-text.svg –