Javascript 不使用SVG图像的节点的背景图像样式

当我将节点背景图像设置为SVG文件时，放大/缩小会更改背景图像。这会造成难看的视觉效果。PNG没有这个问题

这是一个具有SVG背景的节点

放大时，这是同一个节点。您可以看到图像也被放大了

---

某些SVG并不总是由浏览器正确处理。使SVG尽可能健壮，并尽可能多地进行测试。文档中提供了使SVG尽可能兼容的提示：

试试看

.element {
  background-image: url(/images/image.svg);
}

---

这是一段可运行的代码，用于演示如何将

背景图像

与SVG图形结合使用。SVG代码必须在使用前进行适当编码。尝试运行下面的代码，然后放大和缩小（按控制键并使用鼠标滚轮）。SVG图形将随节点正确缩放

const svg\u pin=
'';
const svgpin_Url=encodeURI（“数据：image/svg+xml；utf-8，”+svg_-pin）；
var cy=细胞景观({
容器：document.getElementById（“cy”），
要素：{
节点：[{
数据：{
id:“j”，
姓名：“约翰”
},
职位：{
x:100，
y:100
}
},
{
数据：{
id:“e”，
姓名：“埃琳娜”
},
职位：{
x:100，
y:500
}
},
{
数据：{
id:“k”，
姓名：“金”
},
职位：{
x:600，
y:500
}
},
{
数据：{
id:“g”，
姓名：“戈登”
},
职位：{
x:550，
y:80
}
}
],
边缘：[{
数据：{
资料来源：“j”，
目标：“e”，
标签：“日本脑炎”
}
},
{
数据：{
资料来源：“j”，
目标：“g”，
标签：“JG”
}
},
{
数据：{
资料来源：“e”，
目标：“j”
}
},
{
数据：{
资料来源：“k”，
目标：“j”
}
},
{
数据：{
资料来源：“k”，
目标：“e”，
标签：“柯”
}
},
{
数据：{
资料来源：“k”，
目标：“g”
}
},
{
数据：{
资料来源：“g”，
目标：“j”
}
}
]
},
风格：[{
选择器：“节点”，
风格：{
形状：“六边形”，
“背景色”：“蓝色”，
“背景图像”：svgpin_Url，
标签：“数据（名称）”，
不透明度：0.55
}
},
{
选择器：“边缘”，
风格：{
标签：“数据（标签）”，
宽度：3，
“线条颜色”：“c0c”，
“目标箭头颜色”：“#00c”，
“曲线样式”：“贝塞尔”，
“目标箭头形状”：“三角形”，
“目标箭头填充”：“c00”，
“箭头比例”：20
}
},
{
选择器：“.highlight”，
css:{
“背景色”：“黄色”
}
}
],
布局：{
名称：“预设”
}
});
#cy{
宽度：100%；
身高：80%；
位置：绝对位置；
顶部：10px；
左：10px；
}

我很确定将preserveAspectRatio添加到svg代码中会有所帮助（）。但是我还没有验证。我将尝试验证，因为问题出在SVG文件中。对于一些SVG，我观察到了这个问题。我记得如果我设置SVG的宽度和高度，我就不会发现这个问题PreserveSpectratio

也可能有助于解释（即使非常简短）为什么您的代码只回答实际解决并解决了问题，从而大大改进了您的答案！