如何为rect元素设置SVG图片格式的背景和边框

要实现将rect的蓝色填充替换为SVG图片、粉色描边替换为另一张SVG图片，你需要借助SVG的<pattern>元素定义可复用的图像图案，再将rect的fill和stroke属性绑定到对应的图案即可，具体实现步骤和代码如下：

步骤1：先定义两个图案容器，分别对应背景图和边框图 #

首先向你的SVG根元素插入两个pattern定义，示例代码：

// 获取当前SVG根元素
const svgRoot = document.querySelector('svg');
// 创建背景用的pattern（对应你要替换蓝色背景的SVG图）
const bgPattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
bgPattern.setAttribute('id', 'bgSvgPattern');
bgPattern.setAttribute('width', '100%');
bgPattern.setAttribute('height', '100%');
bgPattern.setAttribute('patternContentUnits', 'objectBoundingBox');
// 插入背景SVG图
const bgImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
bgImg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '你的背景SVG文件路径.svg');
bgImg.setAttribute('width', '1');
bgImg.setAttribute('height', '1');
bgImg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
bgPattern.appendChild(bgImg);

// 创建边框用的pattern（对应你要替换粉色边框的SVG图）
const borderPattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
borderPattern.setAttribute('id', 'borderSvgPattern');
borderPattern.setAttribute('width', '100%');
borderPattern.setAttribute('height', '100%');
borderPattern.setAttribute('patternContentUnits', 'objectBoundingBox');
// 插入边框SVG图
const borderImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
borderImg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '你的边框SVG文件路径.svg');
borderImg.setAttribute('width', '1');
borderImg.setAttribute('height', '1');
borderImg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
borderPattern.appendChild(borderImg);

// 将两个pattern加入SVG的defs节点，没有defs的话先创建
let defs = svgRoot.querySelector('defs');
if (!defs) {
  defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
  svgRoot.insertBefore(defs, svgRoot.firstChild);
}
defs.appendChild(bgPattern);
defs.appendChild(borderPattern);

步骤2：修改原rect的样式，替换填充和描边为上面定义的图案 #

原来的rect样式部分修改为如下即可：

var borderRect = document.createElementNS('http://www.w3.org/2000/svg','rect');
borderRect.setAttribute("id", "bRect");
borderRect.setAttribute("width", bb.width);
borderRect.setAttribute("height", newVboxH);
borderRect.setAttribute("x", bb.x);
borderRect.setAttribute("y", bb.y);
// 填充和描边替换为对应的pattern引用，保留原有的透明度和描边宽度配置
borderRect.setAttribute("style","fill:url(#bgSvgPattern);stroke:url(#borderSvgPattern);stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9");

注意事项 #

• 把代码里的你的背景SVG文件路径.svg和你的边框SVG文件路径.svg替换为你实际的本地/服务端SVG文件路径即可
• 如果需要调整图片适配规则，可以修改preserveAspectRatio的属性值，比如要拉伸铺满可以改成none

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