2

SVG イメージのノード (要素) を宣言する 1 つの HTML5 ページと複数のファイルがあります。ファイルは次のようになります。

<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 画像として表示したいと考えています。すべてクライアント側で実行する必要があり、サーバー側のスクリプトは許可されていません。

4

3 に答える 3

3 
<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"/>

Firefox でのみテスト済み...

あなたが示したように、ファイルが小さい場合、ファイルの同期ロードは問題になりません。

[編集] 少しの改善: ファイルを 2 回読み込む (タグが空srcになる) ことを避け、宣言で要素のサイズを使用します。embedembed

于 2012-12-03T10:45:19.640 に答える
2

主な問題は、SVG スニペットを SVG 名前空間に入れることのようです。XSLT を使用して 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 スニペットをロードする必要があります。

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-03T10:58:35.023 に答える
0

jQueryを使用することに満足している場合は、KeithWoodのSVGプラグインを確認することをお勧めします。私は以前にそれを使用しました、そしてそれは非常に用途が広いです。

ドキュメントページの[ロード]タブを確認すると、外部ファイルをロードして既存のSVGに追加する方法が説明されています。

于 2012-12-03T10:20:24.447 に答える