在开放层上绘制为图标的点似乎可以更改位置，而在放大和缩小时没有坐标

Question

我正在使用开放图层在地图上将点显示为图像。

我已经使用以下代码为该功能提供样式。

   function getSvg(color){
     var color = "fill:"+color;
     return '<svg version="1.1" width="60" height="60"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497.867 497.867" style="enable-background:new 0 0 497.867 497.867;" xml:space="preserve"> <g> <g> <path style="'+color+'" d="M477.546,228.616h-53.567c-9.827-80.034-74.019-143.608-154.719-153.134V20.321 C269.259,9.096,260.155,0,248.938,0c-11.226,0-20.321,9.096-20.321,20.321v54.974c-81.375,8.941-146.257,72.808-156.15,153.313 H20.321C9.096,228.608,0,237.704,0,248.929s9.096,20.321,20.321,20.321H72.19c8.99,81.513,74.328,146.428,156.426,155.451v52.844 c0,11.226,9.096,20.321,20.321,20.321c11.217,0,20.321-9.096,20.321-20.321v-53.023c81.416-9.608,146.054-74.222,154.996-155.264 h53.291c11.226,0,20.321-9.096,20.321-20.321S488.771,228.616,477.546,228.616z M269.259,383.392v-67.028 c0-11.226-9.104-20.321-20.321-20.321c-11.226,0-20.321,9.096-20.321,20.321v67.24c-59.607-8.551-106.753-55.299-115.312-114.345 h68.207c11.226,0,20.321-9.096,20.321-20.321s-9.096-20.321-20.321-20.321h-67.882c9.38-58.046,56.103-103.761,114.987-112.215 v65.11c0,11.226,9.096,20.321,20.321,20.321c11.217,0,20.321-9.096,20.321-20.321v-64.899 c58.209,8.982,104.249,54.421,113.556,112.004h-66.459c-11.226,0-20.321,9.096-20.321,20.321s9.096,20.321,20.321,20.321h66.793 C374.646,327.842,328.191,374.297,269.259,383.392z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>';
   }

  const style = new Style({
    image: new Icon({
           anchor: [0.5, 0.5],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
           src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(getSvg('red'))
          })
    });

可以在地图上正确绘制它，但是当我放大和缩小时，图标的位置和大小似乎在此处发生了变化，因为它显示了不正确的坐标绘制。如何避免这种情况？

我是新手，请打开帮助层。