importNode SVG正在重复的文件内容 - Visual Composer

时间:2016-05-01 08:11:32

标签: jquery svg

我正在做一个项目并使用Visual Composer。我正在使用一些后端渲染。我使用importNode从服务器上选定的svg文件中获取xml并打印它。除了在多个元素中打印所选选项之外,一切正常。

这是关于我在说什么的图像。这里发生的是左边的盒子选择了顶部的svg形状,中间的盒子是心脏和右边的底部形状。并且它在所有3个盒子中按顺序回显它们,而不是仅打印选择形状的盒子。 enter image description here

这是用于从文件中打印xml的jQuery。我尝试将它包装在.each函数中,并且第二次复制它,堆叠6个形状而不是仅仅3个哈哈。无论如何,我不一定是一个高手,非常感谢任何帮助

jQuery.get('../wp-content/plugins/my_plugin/svg/' + svg_type + '.svg', function(svgDoc) {
                    //import contents
                    var importedSVGRootElement = document.importNode(svgDoc.documentElement, true);
                    jQuery("span.my-svg-shape.outside").append(importedSVGRootElement);
                },"xml");

我正在使用它,因为它是我唯一可以开始工作的东西。然而,现在我实际上构建了一个页面,我看到它打印的时间超过1次,奇怪的是没有别的东西。我已经篡改了元素的其他方面,如图标,工作正常。

以下是我们正在处理的元素区域构建的完整代码。

var wrapper = jQuery('<div class="preview_element ' +
                        'image-box" style="width: 474px; max-width: 100%; ' +
                        'overflow: hidden;"></div>');
wrapper.append('<div class="img-wrap">' +
                        '<img class="attachment-large" width="474" ' +
                        'src="//placehold.it/474x355"></div>');
    jQuery.get('../wp-content/plugins/my_plugin/svg/' + svg_type + '.svg', function(svgDoc) {
                        //import contents
                        var importedSVGRootElement = document.importNode(svgDoc.documentElement, true);
                        jQuery("span.my-svg-shape.outside").append(importedSVGRootElement);
                    },"xml");
    wrapper.append('<div class="text-wrap">' +
                        '<span class="my-svg-shape outside ' + svg_type + '"></span><span class="my-svg-shape">' +
                        '<i class="fa ' + icon + '"></i>' +
                        '</span>' +
                        '<div class="callout-details-wrap">' +
                        content +
                        '</div>' +
                        '</div>');
                    wrapper.find('span.my-svg-shape.outside').css('fill', icon_bg_color);
                    }

正如我所说,非常感谢任何帮助。

干杯

更新

感谢Raphael Schweikert这是正确的工作代码段,请参阅他的评论。

jQuery.get('../wp-content/plugins/my_plugin/svg/' + svg_type + '.svg', function(svgDoc) {
                    //import contents
                    var importedSVGRootElement = document.importNode(svgDoc.documentElement, true);
                    wrapper.find('span.my-svg-shape.outside').append(importedSVGRootElement);
                },"xml");

0 个答案:

没有答案