答案 0 :(得分:0)
某些SVG并非总是被浏览器正确处理。使SVG尽可能强大,并进行尽可能多的测试。文档中提供了一些提示,以使您的SVG尽可能兼容:https://js.cytoscape.org/#style/background-image
答案 1 :(得分:0)
尝试
.element {
background-image: url(/images/image.svg);
}
答案 2 :(得分:0)
这是一个可运行的代码,用于演示background-image
与SVG图形的结合使用。使用前,必须对SVG代码进行适当的编码。尝试运行下面的代码,然后放大和缩小(按控制键并使用鼠标上的滚轮)。 SVG图形将随节点正确缩放。
const svg_pin =
'<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" fill="yellow"></path></svg>';
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin);
var cy = cytoscape({
container: document.getElementById("cy"),
elements: {
nodes: [{
data: {
id: "j",
name: "John"
},
position: {
x: 100,
y: 100
}
},
{
data: {
id: "e",
name: "Elena"
},
position: {
x: 100,
y: 500
}
},
{
data: {
id: "k",
name: "Kim"
},
position: {
x: 600,
y: 500
}
},
{
data: {
id: "g",
name: "Gordon"
},
position: {
x: 550,
y: 80
}
}
],
edges: [{
data: {
source: "j",
target: "e",
label: "JE"
}
},
{
data: {
source: "j",
target: "g",
label: "JG"
}
},
{
data: {
source: "e",
target: "j"
}
},
{
data: {
source: "k",
target: "j"
}
},
{
data: {
source: "k",
target: "e",
label: "KE"
}
},
{
data: {
source: "k",
target: "g"
}
},
{
data: {
source: "g",
target: "j"
}
}
]
},
style: [{
selector: "node",
style: {
shape: "hexagon",
"background-color": "blue",
"background-image": svgpin_Url,
label: "data(name)",
opacity: 0.55
}
},
{
selector: "edge",
style: {
label: "data(label)",
width: 3,
"line-color": "#c0c",
"target-arrow-color": "#00c",
"curve-style": "bezier",
"target-arrow-shape": "triangle",
"target-arrow-fill": "#c00",
"arrow-scale": 20
}
},
{
selector: ".highlight",
css: {
"background-color": "yellow"
}
}
],
layout: {
name: "preset"
}
});
#cy {
width: 100%;
height: 80%;
position: absolute;
top: 10px;
left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.min.js"></script>
<div id="cy"></div>