HTML 페이지에서 SVG 노드를로드하는 방법은 무엇입니까?

하나의 HTML5 페이지와 SVG 이미지의 노드 (요소)를 선언하는 여러 파일이 있습니다. 파일은 다음과 같이 :HTML 페이지에서 SVG 노드를로드하는 방법은 무엇입니까?

<g class="background"> 
    <g class="bg_path_a"> 
     <path d="M0 40 L21 40" /> 
    </g> 
    <g class="bg_path_b"> 
     <path d="M42 21 L63 0 100 0 M23 40 L48 15" /> 
    </g> 
    <g class="bg_path_c"> 
     <path d="M53 40 L100 40 M21 40 L53 40" /> 
    </g> 
    <g class="bg_lockpath"> 
     <path d="M21 40 L33 40" /> 
    </g> 
    <g class="bg_label"> 
     <rect x="0" y="20" width="10" height="10" /> 
    </g> 
</g>

된 xmlns가 DTD를 선언하고, 그들이 그렇게 남아 있어야한다. 이제는 이러한 파일을로드 할 수 있지만 HTML5 페이지에 SVG 이미지로 표시하고 싶습니다. 모두 클라이언트 측에서 실행해야하며 서버 측 스크립팅은 허용되지 않습니다.

출처

2012-12-03 StaticBug

<script> 
function createXMLHttpRequest() 
{ 
    if (window.XMLHttpRequest) // Firefox and others 
    { 
    return new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject) // Internet Explorer 
    { 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else 
    { 
    alert("XMLHttpRequest not supported"); 
    return null; 
    } 
} 

function fixSVG() 
{ 
    var svgElement, xmlHTTP, svgDoc 
    xmlHTTP = createXMLHttpRequest(); 
    xmlHTTP.open("GET", "BadSVG.svg", false); 
    xmlHTTP.send(); 
    svgDoc = xmlHTTP.responseText; 
    svgElement = document.getElementById("yuck"); 
    svgElement.outerHTML = "<svg xmlns='http://www.w3.org/2000/svg'" + 
      " width='" + svgElement.width + 
      "' height='" + svgElement.height + "'>" + 
      svgDoc + "</svg>"; 
} 
</script> 
[...] 
<body onLoad="fixSVG()"> 
[...] 
<embed id="yuck" src="" type="image/svg+xml" 
    width="500" height="500" wmode="transparent"/>

...

동기 부하는 문제가되지 않을 것이다.

[EDIT] 약간의 개선 : 파일을 두 번로드하지 마십시오 (은 embed 태그에 공백 임). 선언에서 embed 요소의 크기를 사용하십시오.

출처

2012-12-03 10:45:19 PhiLho

이것은 물론 좋은 해결책이며 분명히 내가 본 네임 스페이스 문제도 해결합니다! –

흠, Chrome 버전으로 테스트 중입니다. 23, broswer가 xmlHTTP.send()를 실행하려고 할 때 "Cross origin requests가 HTTP에만 지원됨"을 얻습니다. 기능 fixSVG()에서 서버를 설정하면 해결 될 수 있습니다 ... 그러나 클라이언트 측 전체를 기반으로하는 솔루션이 있습니까? – StaticBug

예, Chrome은 file : protocol을 사용하여 XHR을하고 싶지 않습니다. 동일한 문제가 발생했으며 서버를 실행하고 로컬 호스트를 사용하면 문제가 사라졌습니다. 파이어 폭스가 까다 롭지는 않다 ... 나는 "완전한 클라이언트 측 기반"질문을 이해하지 못한다. 이미 모든 "클라이언트 측 기반"이다. 그것은 서버 측 스크립트를 포함하지 않고 단지 서버를 사용하여 파일을 제공합니다. – PhiLho

jQuery를 사용해 주시면 기꺼이 Keith Wood's SVG plugin을 확인하시기 바랍니다. 나는 전에 그것을 사용했고 그것은 매우 다재다능합니다.

설명서 페이지의 "로드"탭을 확인하면 외부 파일을로드하여 기존 SVG에 추가하는 방법을 설명합니다. 당신이 그림과 같이 파일이 작은 경우 파일의

단지 파이어 폭스에서 테스트

출처

2012-12-03 10:20:24 FixMaker

주요 문제는 SVG 스 니펫을 SVG 네임 스페이스로 가져 오는 것 같습니다.

<?xml version="1.0" encoding="UTF-8"?> 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns="http://www.w3.org/2000/svg" version="1.0"> 

    <!-- The dimension can be supplied using a parameter. 
     This defaults to 100%. --> 
    <xsl:param name="width" select="'100%'"/> 
    <xsl:param name="height" select="'100%'"/> 

    <xsl:template match="/"> 
    <svg version="1.1" width="{$width}" height="{$height}"> 
     <xsl:apply-templates/> 
    </svg> 
    </xsl:template> 

    <xsl:template match="*"> 
    <xsl:element name="{local-name()}" namespace="http://www.w3.org/2000/svg"> 
     <xsl:apply-templates select="node()|@*"/> 
    </xsl:element> 
    </xsl:template> 

    <xsl:template match="@*|text()"> 
    <xsl:copy-of select="."/> 
    </xsl:template> 
</xsl:stylesheet>

이

당신은

AJAX

를 사용하여 스타일 시트와 SVG 조각을로드해야 할 것 : 당신은 SVG (주변 SVG 요소 추가) 오른쪽 네임 스페이스에 최선을 다하는를 "완료"로 XSLT를 사용할 수 있습니다 AJAX를 사용하여 SVG 스 니펫을 가져 오려면 다음과 같이 입력하십시오.

var loadXML = function(fileName,mime) { 
    xmlHttpRequest = new XMLHttpRequest() 
    xmlHttpRequest.open("GET",fileName,false); 
    xmlHttpRequest.send(""); 
    return xmlHttpRequest.responseXML; 
} 
var svgSnippet = loadXML(snippetURL,"image/svg+xml") 
var xslt = loadXML(xsltURL,"application/xslt+xml") 
var xsltProcessor = new XSLTProcessor(); 
xsltProcessor.importStylesheet(xslt); 
// You can override the default width/height parameters here 
xsltProcessor.setParameter(null,"width","150px") 
xsltProcessor.setParameter(null,"width","90px") 
// In the document there must be some element to append the SVG 
documentGetElementById("svgContainer").appendChild(xsltProcessor.transformToFragment(svgSnippet,document).firstChild)

이것은 모두 테스트되지 않았지만 시작해야 할 부분 일 수 있습니다. XLink 네임 스페이스가 필요한 경우에는 물론 불완전합니다.

출처

2012-12-03 10:58:35

HTML 페이지에서 SVG 노드를로드하는 방법은 무엇입니까?

답변

관련 문제