我正在做一个项目并使用Visual Composer。我正在使用一些后端渲染。我使用importNode从服务器上选定的svg文件中获取xml并打印它。除了在多个元素中打印所选选项之外,一切正常。
这是关于我在说什么的图像。这里发生的是左边的盒子选择了顶部的svg形状,中间的盒子是心脏和右边的底部形状。并且它在所有3个盒子中按顺序回显它们,而不是仅打印选择形状的盒子。
这是用于从文件中打印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");