모바일 브라우저에 SVG foreignObject 텍스트가 표시되지 않습니다.

foreignObject를 사용하여 D3 &을 사용하려고 시도하면 svg에 배치 텍스트가 삽입됩니다. 데스크톱 브라우저에는 텍스트가 표시되지만 모바일 브라우저에는 표시되지 않습니다.모바일 브라우저에 SVG foreignObject 텍스트가 표시되지 않습니다.

라이브 장소 :

https://s3.amazonaws.com/WorkMalawskey/charter_money.html

빈 :

http://jsbin.com/hometutiqi/1/edit?html,output

어떤 아이디어는 내가 무엇을 누락? 나는 그것이 단순하고 어리 석다는 것을 짐작하고있다.

출처

2015-01-16 Nick Malawskey

아마도 foreignObject 지원을 구현하지 않습니다. –

그래, 그렇게 생각 했어.하지만 이것들은 다음과 같을거야. http://caniuse.com/#search=foreignObject –

다음은 모바일 브라우저에 표시되는 예입니다. http : // starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-text.svg –

좋아요, 인라인 foreignObject가 모바일 브라우저에서 올바르게로드 된 것처럼 보이기 때문에 D3에서 ForeignObjects를 호출하는 방식과 비슷합니다. 그래서 어쩌면 난 그냥 그런 식으로 해결하겠습니다

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");

: 즉 :

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

에 반대.

출처

2015-01-16 16:41:35

글쎄 가시성 = "숨김"이라면 당신은 그것을 볼 수 없다는 것은 놀라운 일이 아닙니다. –

하하 그래 :-)하지만 나는 또한 '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>');

출처

2015-01-16 19:00:42

모바일 브라우저에 SVG foreignObject 텍스트가 표시되지 않습니다.

답변

관련 문제