问用普通JS从另一个SVG元素中插入SVG元素
EN

Stack Overflow用户

提问于 2022-02-02 10:29:12

回答 1查看 156关注 0票数 1

我试图使用svg.js库(https://svgjs.dev)动态地呈现SVG元素的内容。在创建基本元素(如线条、多边形和简单textx )并使用它们的属性时，一切都工作得很好。

现在，我想用更复杂的元素扩展绘图，使用现成的SVG (可以在页面上的隐藏div中获得，也可以通过其他方式获得)，这样我需要以某种方式“克隆”到主SVG元素，并调整大小和位置。

下面的图像就是我想要完成的一个例子:矩形是用svgjs的svg.polygon().plot(... )创建的，我想添加树。

做这件事的简单/恰当的方法是什么？

svg

svg.js

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-02 22:23:48

再一次，一个好的睡眠提供了正确的答案，这比我预期的要容易得多。

结果显示，只需要一个use，其中包含svg元素id，还可以选择一个URL来加载SVG文件，这样就可以保存一个将SVG嵌入到页面中的URL：

// the definition of the object to embed
// holds the item id, and transformation data
var item = ...;
var g = svg
    .group()
    .use(
        item.src, 
        resURL + '/svg/sprites.svg')
    .transform({ 
        translateX : item.x, 
        translateY : item.y });

对于在域之外的SVG，您可能需要以不同的方式加载它们。

按照要求，下面仍然是一个部分，但更详细的代码示例；添加完整的代码将使解决方案难以遵循。

免责声明:我还没有进行优化/重构，所以是的，在数据和代码方面都有很大的改进空间。

数据是一个JSON结构，如下所示：

{ 
    "items" : { 
        "item1" : {
            "points" : [[1600,200],[2300,200],[2300,600],[1600,600],[1600,200]],
            "fill"   : "rgba(144, 238, 144, 0.3)",
            "stroke" : "#228B22"
        },
        "item2" : {
            "src":"sprite1"
            "style":{
                "opacity" : 0.3
            },
            "position":{
                "x"     : -360,
                "y"     : 75,
                "scale" : 0.8
            },
        } 
    },
}

处理过程如下：

var svg = SVG("#drawing-" + floor.key)
Object.keys(floor.items).forEach(function(key,index) {
    var item = floor.items[key];
    if (item.hasOwnProperty('points')) {
        var polygon = svg
            .polygon()
            .stroke({ 
                color: item.stroke })
            .fill(item.fill);
        polygon.plot(item.points);
    }
    else if (item.hasOwnProperty('src')) {
        var g = svg
            .group()
            .use(item.src, resURL + '/svg/plan-sprites.svg')
            .transform({ 
                translateX : item.position.x, 
                translateY : item.position.y, 
                scale      : item.position.scale || 1.})
            .css(item.style || { });
    }
});

完成后，页面看起来如下(简化)：

<svg id="drawing-curte" class="hwb-drawing"
    <g id="viewport">
        <polygon points="1600,200 2300,200 2300,600 1600,600 1600,200" stroke="#228b22" fill="#90ee90"></polygon>
        <g><use xlink:href="/resources/svg/plan-sprites.svg#sprite1" transform="matrix(1,0,0,1,1550,150)"></use></g>
    </g>
</svg>