SVG foreignObject가 Chrome에 표시되지 않습니다.

div가 포함 된 foreignObject가 포함 된 SVG 요소가 있습니다. 그런 다음 js에서이 작업을 수행합니다.SVG foreignObject가 Chrome에 표시되지 않습니다.

$("#wrapper>svg>foreignObject>div").sparkline(data);

div 내에 캔버스를 만듭니다. 내가 두 브라우저의 방화범의 HTML 코드를 보면 다음과 같습니다

파이어 폭스 :

<svg> 
    <foreignObject width="20" height="20" x="10" y="-10"> 
     <div> 
      <canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas> 
     </div> 
    </foreignObject> 
</svg>

가 크롬 :

<svg> 
    <foreignobject width="20" height="20" x="10" y="-10"/> 
<svg>

크롬에서조차 사업부를 보여 나던. div를 만드는 방법은 다음과 같습니다.

nodeEnter.append("foreignObject") 
    .attr("width", "20") 
    .attr("height", "20") 
    .attr("x", "10") 
    .attr("y","-10"); 

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox가 제대로 작동 할 것으로 기대됩니다. 그러나 크롬은 그렇지 않습니다. 누구든지 어떤 제안이 있습니까?

크롬의 firebug HTML 출력이 "foreignobject"이지만 Firefox에서 "foreignObject"가 내가 추가 한 방식을 보여준다고 생각합니다.

출처

2012-06-25 ßee

foreignbody의 하위 요소가 HTML 본문이어야합니다. 일단 당신이 그것을 가지고 있으면 몸 속에 아무것도 넣을 수 없습니다.

출처

2012-07-13 13:41:39 Demosthenes

멋진 @Demosthenes 덕분입니다. –

Chrome의 동작이 변경되었으며 하위 요소가 이제 이어야합니다. 이상하게도 Edge는 상관하지 않습니다. 두 브라우저 모두 네임 스페이스가 필요하지 않습니다 (그러나 다른 브라우저는 여전히 까다 롭습니다). – dav1dsm1th

대화에 추가하기 만하면 다음과 같은 마크 업이 있습니다. Chrome과 Firefox는 다르게 동작하며 이러한 스타일 태그는 차이점을 제거했습니다 (HTML 재설정에 추가 하시겠습니까?). 사용자는 분명히 HTML 본문이 태그의 네임 스페이스 참조 xmlns만큼 필요하지 않습니다 (body 또는 간단히 div). 또한 지원되는 기능을 테스트하려면 svg switch 태그를 고려해야합니다.

<!doctype html><html><body> 

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px"> 
    <foreignObject width="100" height="57"> 
    <div xmlns="http://www.w3.org/1999/xhtml" style="position:relative; 
     width:100px;height:57px;overflow:hidden;font-family:Arial; 
     font-weight:400;font-size:12px;line-height:100%;"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod 
      tempor incididunt ut labore 
    </div> 
    </foreignObject> 
</svg> 

</body></html>

출처

2016-05-09 20:07:03

SVG foreignObject가 Chrome에 표시되지 않습니다.

답변

관련 문제