10

ブラウザでSVG<image>をレンダリングしています。http://jsfiddle.net/dt1510/pXA9P/1/で試みたように、コンテンツを動的に変更したいと思います。console.debugではコンテンツが変更されますが、ブラウザーでは同じです。

<svg>  
  <image x="20" y="20" width="300" height="80"
     xlink:href="http://www.erh.noaa.gov/ilm/OpenLayers/img/marker.png" />    
</svg>​

var srcAirline = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA9CAYAAAAeYmHpAAADD0lEQVR42u2aq3LrMBCG+0oH9hUOPK9QWFhYemBhYWhhYWBpYGBgqGGgYduv039mq65l+SY7sjXjcS62pW/1e6Vd6eZ9heVGH46nS/FHdal/Qv+5OxZ/PO+rDTpr5bf3x/fDp9wed+f1QO8Pl686689XDAMUDw2kLU+vVfnQSNqW47kuH1rStqV46HNV/4L+9/9UNrRXcnnxWaDpUa/s9lW50HdPPnQuZzYL9O670g36e5JSLLQ3XOWsfxZoZLxBZx6rFweNZy8OmsAiVjDI1BFXNmjFzikFLz5lj2eBBqC6dE/cTTVDmxy6aUxOLVPIfTJoGhpzWF3K2HKfBJoG1vX4eeqXt2qZ0EPl3FaIw/8+npYBPaacU+T+8HyeF5oG1Hl4R5H7YGgqTi2M00xOYqElBiQgSTViH7n3hqYiL8/lgZIGssNOahIBA2DUtjG+q9x7QcfkzO/0VAiakjmJTUYIRNoMQL0pY3ov6NBhCTTV2qhkyAwMA3Ctp7QUqfeClsU59500eKXPKgeQ3CcDXF0KOEdYOSu0N6avEjrXyuVs0N74XvxaVphQwDEWu5aFhJsmNUPn1IuEpidTMihTL9BnhaaHcWBMLOhRK3E8N7BMcrju6nNkbQt5gK5qSxWSz7nJZttHNgZ0alzLdepdzlfb04Aw5LRlM7SrSI4Kp8VxtT0NcNsEQ1kTQWOERe8YRIYaVpT6sdIESDCc+a7Yl4NrPWjF0ahFz+B31eGth/Ef7QiHNt2nugdDhxvewhSPTQR4eTAPWoFHakbFC1Q0i/Pq9IzWWd40jMZbA8SgsbqGJk/eHjSzNuqQn+C70lThM/lfPkHP4jolFzwn2QmaSqiQh3NoShmDDuWXAu31rL0XWeuVsW3Q/3KoTaNJJ2glAzlbmeWGjm3b4BqbtPScZDJ0KD0bE+eC1oJ+SiSm18/bppUMbTOYknjunlYb6EmgMLpdyqVdvN8YR/cNgg7lRY/bBuWAVg9a+fJZTtJmRWPxeWfvjbVzJfBi8wXa0NQOtbFpersFHBv0Bl049JrKB2+Sq02r4bQjAAAAAElFTkSuQmCC";

$('document').ready(change_image);

function change_image(){    
    var images = $("image");
    var image = images[0];        
    $(image).removeAttr("xlink:href");
    $(image).attr("src", srcAirline);
    console.debug(image);
}

AJAXリクエストで可能かもしれないとどこかで読みましたが、ページはオフラインで表示可能である必要があります。また、画像コンテンツを変数に保存する必要があり、外部リソースとして保存できないという制約もあります。

SVG画像のコンテンツを動的に変更する簡単な方法はありますか？

4

2 に答える 2

18

  1. これまで見てきたように、SVG<image>要素はhref属性を使用してコンテンツを調達します。src（HTMLの要素と同様に）属性の設定は機能し<img>ません。

  2. href属性はXLink名前空間にあります。名前空間プレフィックスを宣言したことはありませんが、それがそれであるため、そのように設定する必要があります。

これは、jQueryデモを介して行うことができます：http： //jsfiddle.net/pXA9P/4/：

$("image").attr('xlink:href',srcAirline);

または標準のDOMデモ： http： //jsfiddle.net/pXA9P/5/：

document.querySelector('image')
  .setAttributeNS('http://www.w3.org/1999/xlink','href',srcAirline);
于 2012-08-14T22:03:55.680 に答える
1

D3ライブラリを使用している場合は、以下を使用してsvgイメージを動的にロードできます。

d3.select("body") //select body in html
.append("svg")  //add svg element in body tag
.append("image")  // add image tag in svg element
.attr('xlink:href',"image.svg") //set href property of image element..
.attr("width",50) //set width of image
.attr("height",50) //set height of image

これは、D3ライブラリを使用している人にとって非常に便利です。

于 2013-02-24T12:47:47.617 に答える