对 svg 数据使用 <use> 时强制重绘 svg

Force redraw of svg when using <use> for svg data

本文关键字：svg use 数据      更新时间：2023-09-26

我有一个svg元素（#svg_wrapper），它使用一个元素显示，该元素加载存储在dom中的svg数据（由ajax更新）在display：nonediv父级（#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>

如何刷新隐藏div 的innerHTML并重新附加新数据？

简单如下：

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

作为旁注：

虽然更改 SVG 的内部数据应该会强制它重绘，但您也可以尽量不直接更改 SVG 的数据。

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

相关文章：