带边框的SVG转为Image元素时被裁剪的问题求助

问题场景 #

内联嵌入HTML的SVG（带5px红色边框）显示正常无裁剪，但通过Blob转换为Image元素后，边框被完全裁剪，只有设置transform:scale(0.9)缩放后才能看到部分边框。尝试调整SVG的width、height、viewBox属性，以及将Image元素宽高设为310，都没能解决问题。

相关代码 #

JavaScript代码

const svgStr = document.querySelector("svg").outerHTML,
      svgBlob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" }),
      imgElem = new Image();
imgElem.src = URL.createObjectURL(svgBlob);
document.body.appendChild(imgElem);

HTML代码

<div>inline svg</div>
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"
     style="border:5px solid red;">
</svg>
<br><br>      
<div>svg as image content</div>

问题根源 #

SVG通过style设置的CSS边框，在SVG作为独立资源（比如通过Blob URL加载到<img>）时，外部CSS样式不会被SVG内部解析生效；同时SVG的viewBox和自身尺寸是300x300，即使边框样式生效，也会超出这个范围被裁剪。

解决方案 #

方案一：用SVG内部图形实现边框（推荐） #

把CSS边框替换为SVG内置的<rect>元素，这样边框属于SVG图形的一部分，转为Image时会被完整渲染：

修改后的HTML代码：

<div>inline svg</div>
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- stroke-width设为10是因为SVG的描边是居中绘制，内外各占5px，刚好得到5px的边框效果 -->
  <rect x="0" y="0" width="300" height="300" stroke="red" stroke-width="10" fill="transparent" />
</svg>
<br><br>      
<div>svg as image content</div>

方案二：调整SVG的viewBox和尺寸，预留边框空间 #

扩大SVG的可视范围和自身尺寸，让边框能被完整包含：

修改后的HTML代码：

<div>inline svg</div>
<svg width="310" height="310" viewBox="-5 -5 310 310" xmlns="http://www.w3.org/2000/svg"
     style="border:5px solid red;">
</svg>
<br><br>      
<div>svg as image content</div>

这里viewBox起始坐标设为-5 -5，宽高设为310，相当于给SVG四周各留出5px的空间容纳边框，同时SVG自身宽高设为310，确保显示时边框不被裁剪。

内容的提问来源于stack exchange，提问作者Anil kumar