javascript - 节点的背景图像样式不适用于 SVG 图像

Question

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

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

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

Answer 1

这是一个可运行的代码，用于演示如何使用 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>