0

e コマース プラットフォームを使用していますが、d3 やその他の svg ライブラリをインストールできません。セキュリティ上の理由から、このサイトでは「外部ソース」を持つ iframe を操作することはできません。どうやら、すべての iframe は外部のものですが、何でも構いません。

だから私が頼ったのは、svgをdivタグに挿入しようとすることです。私のコードが機能しない理由がわからない。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>

4

2 に答える 2

1

ここでカップルの問題。まず第一に、あなたがこれをどのように行っているかは非常にお勧めできません。onclick プロパティを使用して、SVG の単一のプロパティを変更するだけでなく、innerHTML を使用して SVG 要素全体を文字列に置き換え、文字列をすべての行に分割します。多くのことがうまくいかない可能性があります。

まず、コードを少なくとも機能させるには、文字列割り当てですべての改行文字をエスケープする必要があります。\これは、文字列を分割するすべての行の末尾に追加するだけで実行できます。残念ながら、文字列に二重引用符を使用しながら、二重引用符を使用して文字列を囲みます。それらもエスケープする必要があります。

最後に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-06T17:40:54.873 に答える
0

単純に<img src="XxX"/>tag または use を使用できます<svg>。詳細はこちら: W3school

于 2016-09-06T17:28:39.303 に答える