Question

我需要将SVG对象添加到附加到DOM的SVG对象内的特定位置。

但每当我这样做时，我看不到屏幕上呈现的任何内容。我可以看到添加了SVG对象（在DevTools的Elements选项卡中）但它们没有被渲染。它们是纯SVG（不包含像DIV这样的HTML元素）。

我尝试加载带有ajax的SVG并添加它们，尝试使用Snap，尝试将这些元素放在<defs>标记中，使用Snap找到它们然后将它们添加到主捕捉对象。似乎没什么用。始终添加对象但不渲染。

这甚至可能吗？

SVG

<svg width="400" height="300" style="background: gray">
    <defs>
        <circle id="redc" cx="50" cy="50" r="50" style="fill: red" />
        <circle id="yelc" cx="40" cy="40" r="40" style="fill: yellow" />
    </defs>
    <circle id="bluc" cx="200" cy="200" r="50" style="fill: blue" />
</svg>

的JavaScript

const s = Snap("#root");

Snap.load('images/all.svg', function(data){
    var all = data;

    // append the all.svg node. cool
    s.append( all.node );

    // get the red circle definition
    var redc = all.select('#redc');

    s.append(redc.node); // doesn't work
});

与异物：

Snap.load('images/all.svg', function(data){
    var all = data;

    // append the all.svg node. cool
    s.append( all.node );

    // get the red circle definition
    var redc = all.select('#redc');

    // foreign object
    var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");
    foreign.setAttribute('width', 500);
foreign.setAttribute('height', 150);
    foreign.appendChild(redc);

    // add the foreign object - doesn't work
    s.append( foreign );
});

Answer 1

它不起作用，因为您将圆圈附加到<svg>树之外，即直接位于#root下面，这可能是某种HTML元素，例如<div>

foreignObject问题基本相同。不知道你为什么要尝试将一个圆圈添加为foreignObject的子节点（因为你需要一个svg元素作为它的父节点，所以不会起作用）。我改为使用了html元素。

const s = Snap("#root");

var svg = '<svg width="400" height="300" style="background: gray"><defs><circle id="redc" cx="50" cy="50" r="50" style="fill: red" /><circle id="yelc" cx="40" cy="40" r="40" style="fill: yellow" /></defs><circle id="bluc" cx="200" cy="200" r="50" style="fill: blue" /></svg>';

var all = Snap.parse(svg);

// append the all.svg node. cool
s.append( all.node );

// get the red circle definition
var redc = all.select('#redc');

all.node.append(redc.node); // append as a child of the svg node

// foreign object
var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");
foreign.setAttribute('width', 500);
foreign.setAttribute('height', 150);
foreign.setAttribute('fill', 'pink');
var p = document.createElement('p');
foreign.appendChild(p);
var text = document.createTextNode("Hello World");
p.appendChild(text);

// add the foreign object to the correct part of the tree
all.node.append( foreign );

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<div id="root"></div>

以编程方式在SVG中添加SVG

1 个答案: