Программно создать элемент изображения SVG с помощью JavaScript - PullRequest
Новая
       6

Программно создать элемент изображения SVG с помощью JavaScript

28 голосов
/ 15 июля 2011

Как говорит мой заголовок, я пытаюсь программно создать элемент изображения SVG на HTML-странице с помощью JavaScript. По какой-то причине мой основной код JavaScript не работает, однако, если я использую библиотеку Raphaeljs, она работает нормально. Так что, очевидно, проблема с моим JS - я просто не могу понять, что это такое.

(примечание: целевой браузер - FF4 +)

Вот базовая страница с html-версией того, что я пытаюсь достичь: 

<html>
    <head>
        <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
    </head>
    <body>

       <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        id="test1"
        height="200px"
        width="200px">
            <image
            id="testimg1"
            xlink:href="http://i.imgur.com/LQIsf.jpg"
            width="100"
            height="100"
            x="0"
            y="0"/>
        </svg>

        <hr />

        <p id="testP1">


        </p>
        <hr />      
        <p id="testP2">


        </p>        
    </body>
</html>

А вот мой JavaScript: 

var paper = Raphael(document.getElementById("testP1"), 200, 200);
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100);



var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2');

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0');

svg.appendChild(svgimg);

document.querySelector('#testP2').appendChild(svg);

Живой пример: http://jsfiddle.net/Yansky/UVFBj/5/

Ответы [ 2 ]

38 голосов
/ 15 июля 2011

Собственные атрибуты SVG (не включая xlink:href) не разделяют пространство имен SVG;Вы можете либо использовать setAttribute вместо setAttributeNS, либо использовать 

svgimg.setAttributeNS(null,'x','0');

, например.

Вот оно: http://jsfiddle.net/UVFBj/8/

Примечаниечто я изменил вашу скрипку, чтобы правильно использовать XHTML, чтобы SVG прекрасно работал во всех основных браузерах.

7 голосов
/ 18 апреля 2014

Для дальнейшего использования.

Я использовал функцию ниже для создания SVG-элементов, но не удалось создать изображения из-за xlink: href.

Код ниже исправлен, чтобы сделать это (создайте любой элемент SVG на лету) 

function makeSVG(parent, tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs){
                if(k=="xlink:href"){
                    el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
                }else{
                    el.setAttribute(k, attrs[k]);
                }
            }
        }

Пример использования: 

makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});

parent используется для организации 'слоев' по тегу svg groups.

...