0

次の SVG のチャンクを考えてみましょう。

<defs>
  <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:#568f82;stop-opacity:1" />
    <stop offset="100%" style="stop-color:#568f82;stop-opacity:0" />
  </radialGradient>
</defs>

これらの要素を作成するための対応する JavaScript は次のとおりです。

var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
var radialGradient = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
radialGradient.id = 'gradient';
radialGradient.setAttribute('cx', '50%');
radialGradient.setAttribute('cy', '50%');
radialGradient.setAttribute('fx', '50%');
radialGradient.setAttribute('fy', '50%');
radialGradient.setAttribute('r', '50%');
var stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('style', 'stop-color:#568f82;stop-opacity:1');
radialGradient.appendChild(stop1);
var stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('style', 'stop-color:#568f82;stop-opacity:0');
radialGradient.appendChild(stop2);
defs.appendChild(radialGradient);
this.svgElement.appendChild(defs);

JavaScript で XML マークアップをインラインで使用する方法はありますか? 私は次のようなものを試しましたが、運がありませんでした:

var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
defs.innerHTML = 
    '<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">' +
    '    <stop offset="0%" style="stop-color:#568f82;stop-opacity:1" />' +
    '    <stop offset="100%" style="stop-color:#568f82;stop-opacity:0" />' +
    '</radialGradient>';

innerHTMLのプロパティではないようですSVGElement。

4

3 に答える 3

2 
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");

親ノードは、正しく解析されるように明示的な名前空間を持つ必要があることに注意してください。つまり、文字列は次のようになる必要があります。

var stringContainingXMLSource = '<radialGradient xmlns="http://www.w3.org/2000/svg" id="gradient" ...

それからあなたはすることができます

defs.appendChild(document.importNode(doc.documentElement));

UA の中には、doc.documentElement の代わりに doc.rootElement を許可するものもありますが、明らかにすべてではありません。

于 2013-10-14T12:58:14.167 に答える
1

直接的なマークアップ プロパティはありませんが、DOMParser.parseFromString()一部の XML を新しい SVG ドキュメントに解析し、importNodeそれを横断するために使用できます。innerHTMLまたは、コンテナ HTML 要素のコンテンツを設定し、結果から SVG ノードを引き出すために使用できます。

しかし、文字列スリングは少し厄介です。変数の内容や属性値を取り込もうとすると、適切なエスケープを覚えていないまま文字列を連結してしまうと、クロスサイト スクリプティングの問題が発生します。可能であれば、エンコードされたマークアップではなく、オブジェクトとプロパティの世界にすべてを保持できると便利です。

確かに、非常に冗長な DOM API ではそれほど簡単ではありませんが、ショートカット関数を記述して DOM メソッドを呼び出すことができ、次のようなものを記述できます。

xml(SVG, 'defs', {}, [
    xml(SVG, 'radialGradient', {id: 'gradient', cx: '50%', cy: '50%', fx: '50%', fy: '50%' r: '50%'}, [
        xml(SVG, 'path', {offset:   '0%', 'stop-color': '#568f82', 'stop-opacity': 1}),
        xml(SVG, 'path', {offset: '100%', 'stop-color': '#568f82', 'stop-opacity': 0})
    ])
])

これは対処がはるかに簡単です。

于 2013-10-14T13:15:05.453 に答える
0

さらに簡潔な構文が必要で、ライブラリを使用する意思がある場合は、Raphaëlまたはsvg.jsを試すことを検討してください。

于 2013-10-14T13:57:59.133 に答える