围绕轴点旋转SVG中的泪珠形状

Question

我正在尝试在带有 SVG 图标的 Leaflet 地图上显示一堆气象站。现在我只是想掌握绘图部分。

图标是泪状的，应该根据风向围绕图标的“圆圈”部分旋转。

我很难弄清楚如何设置 transform 和 transform-origin 以使其图标“保持原位”并围绕路径中的“圆圈”旋转。

在下面的示例中，数字应位于圆圈的中间。

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();

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

}

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

<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>

Answer 1

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

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

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();

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

}

<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>

Answer 2

将原点设置为 60% 是否达到您想要的效果？

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();

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

}

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

<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>