자바 스크립트로 div 태그에 인라인 svg 삽입

전자 상거래 플랫폼으로 작업 중이며 d3 또는 기타 svg 라이브러리를 설치할 수 없습니다. 보안상의 이유로이 사이트에서는 "외부 소스"가있는 iframe을 조작 할 수 없습니다. 분명히 모든 iframe은 외부이지만 어떤 것이 든 가능합니다.자바 스크립트로 div 태그에 인라인 svg 삽입

그래서 나는 div 태그에 svg를 삽입하려고합니다. 왜 내 코드가 작동하지 않을지 모르겠다. 나는 svg 또는 뭔가를 추가해야합니까? 눌렀을 때 원을 빨간색으로 변경해야합니다.

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div id=inlinetest> 
 
    <svg 
 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
 
    xmlns:cc="http://creativecommons.org/ns#" 
 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 
    width="100mm" 
 
    height="100mm" 
 
    viewBox="0 0 744.09448819 1052.3622047" 
 
    id="svg2" 
 
    version="1.1" 
 
    inkscape:version="0.91 r13725" 
 
    sodipodi:docname="drawing-2.svg"> 
 
    <defs 
 
     id="defs4" /> 
 
    <sodipodi:namedview 
 
     id="base" 
 
     pagecolor="#ffffff" 
 
     bordercolor="#666666" 
 
     borderopacity="1.0" 
 
     inkscape:pageopacity="0.0" 
 
     inkscape:pageshadow="2" 
 
     inkscape:zoom="0.7" 
 
     inkscape:cx="110.88456" 
 
     inkscape:cy="710.05401" 
 
     inkscape:document-units="px" 
 
     inkscape:current-layer="layer1" 
 
     showgrid="false" 
 
     inkscape:window-width="250" 
 
     inkscape:window-height="250" 
 
     inkscape:window-x="-8" 
 
     inkscape:window-y="-8" 
 
     inkscape:window-maximized="1" /> 
 
    <metadata 
 
     id="metadata7"> 
 
     <rdf:RDF> 
 
     <cc:Work 
 
      rdf:about=""> 
 
      <dc:format>image/svg+xml</dc:format> 
 
      <dc:type 
 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
 
      <dc:title></dc:title> 
 
     </cc:Work> 
 
     </rdf:RDF> 
 
    </metadata> 
 
    <g 
 
     inkscape:label="Layer 1" 
 
     inkscape:groupmode="layer" 
 
     id="layer1"> 
 
     <circle 
 
     style="fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none" 
 
     id="path3336" 
 
     cx="131.42857" 
 
     cy="129.50507" 
 
     r="131.42857" /> 
 
    </g> 
 
    </svg> 
 
</div> 
 
<div> 
 
<button onclick="myFunction()">Click me</button> 
 
</div> 
 

 

 
</body> 
 
<script> 
 
function myFunction() { 
 
document.getElementById('inlinetest').innerHTML = "<svg 
 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
 
    xmlns:cc="http://creativecommons.org/ns#" 
 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 
    width="100mm" 
 
    height="100mm" 
 
    viewBox="0 0 744.09448819 1052.3622047" 
 
    id="svg2" 
 
    version="1.1" 
 
    inkscape:version="0.91 r13725" 
 
    sodipodi:docname="drawing-2.svg"> 
 
    <defs 
 
    id="defs4" /> 
 
    <sodipodi:namedview 
 
    id="base" 
 
    pagecolor="#ffffff" 
 
    bordercolor="#666666" 
 
    borderopacity="1.0" 
 
    inkscape:pageopacity="0.0" 
 
    inkscape:pageshadow="2" 
 
    inkscape:zoom="0.7" 
 
    inkscape:cx="110.88456" 
 
    inkscape:cy="710.05401" 
 
    inkscape:document-units="px" 
 
    inkscape:current-layer="layer1" 
 
    showgrid="false" 
 
    inkscape:window-width="250" 
 
    inkscape:window-height="250" 
 
    inkscape:window-x="-8" 
 
    inkscape:window-y="-8" 
 
    inkscape:window-maximized="1" /> 
 
    <metadata 
 
    id="metadata7"> 
 
    <rdf:RDF> 
 
     <cc:Work 
 
     rdf:about=""> 
 
     <dc:format>image/svg+xml</dc:format> 
 
     <dc:type 
 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
 
     <dc:title></dc:title> 
 
     </cc:Work> 
 
    </rdf:RDF> 
 
    </metadata> 
 
    <g 
 
    inkscape:label="Layer 1" 
 
    inkscape:groupmode="layer" 
 
    id="layer1"> 
 
    <circle 
 
     style="fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none" 
 
     id="path3336" 
 
     cx="131.42857" 
 
     cy="129.50507" 
 
     r="131.42857" /> 
 
    </g> 
 
</svg>"; 
 
} 
 

 
</script> 
 

 

 
</html>

출처

2016-09-06 zack mcdonald

여기의 몇 개의 문제. 우선, 내가 어떻게하는지에 대해서는 언급하지 않을 것입니다. SVG의 단일 속성을 수정하는 대신 innerHTML을 사용하여 전체 SVG 요소를 문자열로 대체하고 onclick 속성을 사용하여 문자열을 모든 해당 줄로 분리합니다. 많은 것이 잘못 될 수 있습니다.

먼저 코드가 작동하려면 문자열 할당에서 모든 개행 문자를 이스케이프 처리해야합니다. 그 문자열을 끊는 모든 줄의 끝에 \을 추가하면됩니다. 유감스럽게도 문자열에 큰 따옴표를 사용하는 경우 큰 따옴표를 사용하여 문자열을 묶습니다. 그것들도 탈출해야합니다.

마지막으로 onclick 속성은 문서의 해당 시점에 myFunction이 없기 때문에 작동하지 않습니다. 대신 addEventListener을 사용하여 이벤트 리스너로 추가했습니다.

"작동"하는 동안 SVG의 개별 요소를 업데이트하거나 클래스를 추가하고 CSS를 사용하는 것이 좋습니다. 그러나 거대한 문자열을 사용할 때마다 모든 것을 바꿀 필요는 없습니다. 그렇게해라.

<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div id=inlinetest> 
 
    <svg 
 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
 
    xmlns:cc="http://creativecommons.org/ns#" 
 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 
    width="100mm" 
 
    height="100mm" 
 
    viewBox="0 0 744.09448819 1052.3622047" 
 
    id="svg2" 
 
    version="1.1" 
 
    inkscape:version="0.91 r13725" 
 
    sodipodi:docname="drawing-2.svg"> 
 
    <defs 
 
     id="defs4" /> 
 
    <sodipodi:namedview 
 
     id="base" 
 
     pagecolor="#ffffff" 
 
     bordercolor="#666666" 
 
     borderopacity="1.0" 
 
     inkscape:pageopacity="0.0" 
 
     inkscape:pageshadow="2" 
 
     inkscape:zoom="0.7" 
 
     inkscape:cx="110.88456" 
 
     inkscape:cy="710.05401" 
 
     inkscape:document-units="px" 
 
     inkscape:current-layer="layer1" 
 
     showgrid="false" 
 
     inkscape:window-width="250" 
 
     inkscape:window-height="250" 
 
     inkscape:window-x="-8" 
 
     inkscape:window-y="-8" 
 
     inkscape:window-maximized="1" /> 
 
    <metadata 
 
     id="metadata7"> 
 
     <rdf:RDF> 
 
     <cc:Work 
 
      rdf:about=""> 
 
      <dc:format>image/svg+xml</dc:format> 
 
      <dc:type 
 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
 
      <dc:title></dc:title> 
 
     </cc:Work> 
 
     </rdf:RDF> 
 
    </metadata> 
 
    <g 
 
     inkscape:label="Layer 1" 
 
     inkscape:groupmode="layer" 
 
     id="layer1"> 
 
     <circle 
 
     style="fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none" 
 
     id="path3336" 
 
     cx="131.42857" 
 
     cy="129.50507" 
 
     r="131.42857" /> 
 
    </g> 
 
    </svg> 
 
</div> 
 
<div> 
 
<button id="myButton">Click me</button> 
 
</div> 
 

 

 
</body> 
 
<script> 
 
document.getElementById('myButton').addEventListener('click', function() { 
 
document.getElementById('inlinetest').innerHTML = "<svg\ 
 
    xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\ 
 
    xmlns:cc=\"http://creativecommons.org/ns#\"\ 
 
    xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\ 
 
    xmlns:svg=\"http://www.w3.org/2000/svg\"\ 
 
    xmlns=\"http://www.w3.org/2000/svg\"\ 
 
    xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"\ 
 
    xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\ 
 
    width=\"100mm\"\ 
 
    height=\"100mm\"\ 
 
    viewBox=\"0 0 744.09448819 1052.3622047\"\ 
 
    id=\"svg2\"\ 
 
    version=\"1.1\"\ 
 
    inkscape:version=\"0.91 r13725\"\ 
 
    sodipodi:docname=\"drawing-2.svg\">\ 
 
    <defs\ 
 
    id=\"defs4\" />\ 
 
    <sodipodi:namedview\ 
 
    id=\"base\"\ 
 
    pagecolor=\"#ffffff\"\ 
 
    bordercolor=\"#666666\"\ 
 
    borderopacity=\"1.0\"\ 
 
    inkscape:pageopacity=\"0.0\"\ 
 
    inkscape:pageshadow=\"2\"\ 
 
    inkscape:zoom=\"0.7\"\ 
 
    inkscape:cx=\"110.88456\"\ 
 
    inkscape:cy=\"710.05401\"\ 
 
    inkscape:document-units=\"px\"\ 
 
    inkscape:current-layer=\"layer1\"\ 
 
    showgrid=\"false\"\ 
 
    inkscape:window-width=\"250\"\ 
 
    inkscape:window-height=\"250\"\ 
 
    inkscape:window-x=\"-8\"\ 
 
    inkscape:window-y=\"-8\"\ 
 
    inkscape:window-maximized=\"1\" />\ 
 
    <metadata\ 
 
    id=\"metadata7\">\ 
 
    <rdf:RDF>\ 
 
     <cc:Work\ 
 
     rdf:about=\"\">\ 
 
     <dc:format>image/svg+xml</dc:format>\ 
 
     <dc:type\ 
 
      rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\ 
 
     <dc:title></dc:title>\ 
 
     </cc:Work>\ 
 
    </rdf:RDF>\ 
 
    </metadata>\ 
 
    <g\ 
 
    inkscape:label=\"Layer 1\"\ 
 
    inkscape:groupmode=\"layer\"\ 
 
    id=\"layer1\">\ 
 
    <circle\ 
 
     style=\"fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none\"\ 
 
     id=\"path3336\"\ 
 
     cx=\"131.42857\"\ 
 
     cy=\"129.50507\"\ 
 
     r=\"131.42857\" />\ 
 
    </g>\ 
 
</svg>"; 
 
}); 
 

 
</script> 
 

 

 
</html>

출처

2016-09-06 17:40:54

끝내주는 사람. 나는 모든 라인을 끝내는 것으로 생각했다. \ –

나는 정말로 도움에 감사한다. 나는 이것을 며칠 동안 연구했는데 아무도 발견하지 못했습니다. 내 샘플 코드를 단순화하기 때문에 개별 개체를 수정하는 것이 훨씬 좋지만 불행히도 완전히 다른 2 개의 svg 파일을 추가하기 때문에 말입니다. 다시 한번 감사드립니다. –

당신은 단순히 <img src="XxX"/> 태그를 사용하거나 <svg>를 사용할 수 있습니다. 더 많은 정보는 여기에있다 : W3school

출처

2016-09-06 17:28:39

downvote가 왜 확실하지. W3schools 참조가 마음에 들지 않지만 가능한 방법입니다. 당신은 svg를 base64로 인코딩해야 할 것입니다 (외부 소스가 없다는 것을 고려하십시오). –

@josephmarikle 이미지가 대화 형이 아니므로 클릭시 원을 빨간색으로 변경할 수 없습니다. –

@RobertLongson OP의 원래 시나리오는 어쨌든 대화식이 아닙니다. 단추를 클릭 할 때마다 기존 SVG가 날아가고 단순히 포함 된 div의 'innerHTML'을 변경하여 만든 새 SVG로 바뀝니다. 그것은 base64로 인코딩하고'img' 태그를 사용하는 차이점입니다. –

자바 스크립트로 div 태그에 인라인 svg 삽입

답변

관련 문제