節點的背景圖像樣式不適用於SVG圖像

Question

當我將節點背景圖像設置為SVG文件時，放大/縮小會更改背景圖像。 這使丑陋的視覺效果。 PNG沒有這個問題。

這是具有SVG背景的節點

當我放大時，這是同一節點。您可以看到圖像也在放大

Answer 1

某些SVG並非總是被瀏覽器正確處理。 使SVG盡可能強大，並進行盡可能多的測試。 文檔中提供了一些提示，以使您的SVG盡可能兼容： https : //js.cytoscape.org/#style/background-image

Answer 2

嘗試

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

Answer 3

這是一個可運行的代碼，用於演示將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>