Question

我有一个svg元素（#svg_wrapper），它使用一个元素显示，该元素加载存储在dom下的svg数据（由ajax更新），显示在display：none div parent（#svg_loader）下。在隐藏div中加载更新的svg标记后，如何强制重新绘制元素使用的svg数据？

在我的情况下使用是必要的，因为这是我可以将加载的svg扩展到我的容器大小（#timeline_wrapper）的唯一方法。

我成功地在#svg_loader中成功添加了更新的svg节点，但浏览器没有重新呈现更改。如何强制它重绘刚刚加载到DOM中的已更改的svg（并替换了前一个）？

<div id='svg_loader' style='display:none;'>
<svg id='svg_timeline'> ajax-updated svg data</svg>
</div>
<div id='timeline_wrapper' style='width:725px;margin-left:auto;margin-right:auto;text-align:center;'>
<svg id='svg_wrapper' style='width:725px;height:352px;' xmlns='http://www.w3.org/2000/svg' xmlns:x='http://www.w3.org/1999/xlink' >
<defs id='defs3006'>
<marker orient='auto' refY='0.0' refX='-3' id='Arrow2Mend' style='overflow:visible;'>
  <path id='path3900' style='fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;' d='M -15 -5 L 0 0 L -15 5 z' transform='scale(0.5)'/>
</marker>
</defs>
<use xlink:href='#svg_timeline' x='0' y='-35' width='100%' height='100%' />
</svg>
</div>

Answer 1

刷新隐藏div的innerHTML和重新附加新数据怎么样？

简单如下：

var hiddenDiv = document.getElementById('yourHiddenDiv');
hiddenDiv.innerHTML = ''; 
hiddenDiv.innerHTML = svgData; //where svgData is your new svg string

作为旁注：

虽然更改SVG 的内部数据会强制重绘，但您也可以尝试不直接更改SVG的数据。

你可以用新的SVG字符串替换整个SVG字符串 - 如果你没有通过AJAX调用获得带有<svg>标签的整个SVG字符串数据，你可以简单地创建自己的字符串（在完整的SVG中）格式），只需连接你的AJAX数据，然后通过innerHTML=yourFullSvgString附加它，如上所述

使用<use> for svg data </use>时强制重绘svg

1 个答案: