SVG绕轴点旋转泪珠形状

Question

我试图在带有SVG图标的Leaflet地图上显示一堆气象站。现在我只是试图抓住绘图部分。

图标呈泪滴状，应围绕＆＃34;圆圈旋转。图标的一部分取决于风的方向。

我很难弄清楚如何设置transform和transform-origin，以便将图标保留在原位＆＃34;并围绕＆＃34;旋转＆＃34;在路上。

在下面的例子中，数字应该保持在圆圈的中间。

＆＃13;

＆＃13;

var svg = d3.select('#icon svg');
// this is really done dynamically based on wind direction


var d = 0;
var path = svg.select('path');

// The animated rotation is just to make the example easy to verify.
function rotate(){
  d = (d + 15 < 360) ? d + 15 : 0;
  path.style('transform', 'rotate('+d+'deg)');
  window.setTimeout(rotate, 60);
};

rotate();

＆＃13;

svg {
  overflow: visible;
  background-color: #ffedfd

}

.station-icon path {
  /** what am I supposed to use here? **/
  transform-origin: center 40%;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="icon" class="leaflet-marker-icon station-icon">
  <svg width="26" height="26">
    <g transform="translate(0,-6)">
      <path class="st0" d="M26,19c0-2.2-0.6-4.4-1.6-6.2C22.2,8.8,13,0,13,0S3.8,8.7,1.6,12.8c-1,1.8-1.6,4-1.6,6.2c0,7.2,5.8,13,13,13
      S26,26.2,26,19z"/>
    </g>
    <g>
      <text x="13" y="13" font-family="sans-serif" font-size="20px" fill="white" text-anchor="middle" alignment-baseline="central">6</text>
    </g>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

不使用transform-origin的替代方法是设置旋转的中心（此处，使用幻数）：

path.attr('transform', 'rotate('+d+' 13 19)');

＆＃13;

＆＃13;

var svg = d3.select('#icon svg');
// this is really done dynamically based on wind direction


var d = 0;
var path = svg.select('path');

// The animated rotation is just to make the example easy to verify.
function rotate(){
  d = (d + 15 < 360) ? d + 15 : 0;
  path.attr('transform', 'rotate('+d+' 13 19)');
  window.setTimeout(rotate, 60);
};

rotate();

＆＃13;

svg {
  overflow: visible;
  background-color: #ffedfd

}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="icon" class="leaflet-marker-icon station-icon">
  <svg width="26" height="26">
    <g transform="translate(0,-6)">
      <path class="st0" d="M26,19c0-2.2-0.6-4.4-1.6-6.2C22.2,8.8,13,0,13,0S3.8,8.7,1.6,12.8c-1,1.8-1.6,4-1.6,6.2c0,7.2,5.8,13,13,13
      S26,26.2,26,19z"/>
    </g>
    <g>
      <text x="13" y="13" font-family="sans-serif" font-size="20px" fill="white" text-anchor="middle" alignment-baseline="central">6</text>
    </g>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将原点设置为60％是否符合您的要求？

＆＃13;

＆＃13;

var svg = d3.select('#icon svg');
// this is really done dynamically based on wind direction


var d = 0;
var path = svg.select('path');

function rotate(){
  d = (d + 15 < 360) ? d + 15 : 0;
  path.style('transform', 'rotate('+d+'deg)');
  window.setTimeout(rotate, 60);
};

rotate();

＆＃13;

svg {
  overflow: visible;
  background-color: #ffedfd

}

.station-icon path {
  /** what am I supposed to use here? **/
  transform-origin: center 60%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="icon" class="leaflet-marker-icon station-icon">
  <svg width="26" height="26">
    <g transform="translate(0,-6)">
      <path class="st0" d="M26,19c0-2.2-0.6-4.4-1.6-6.2C22.2,8.8,13,0,13,0S3.8,8.7,1.6,12.8c-1,1.8-1.6,4-1.6,6.2c0,7.2,5.8,13,13,13
      S26,26.2,26,19z"/>
    </g>
    <g>
      <text x="13" y="13" font-family="sans-serif" font-size="20px" fill="white" text-anchor="middle" alignment-baseline="central">6</text>
    </g>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;