SVGの枢軸点を中心に回転する涙の形

Question

私はSVGアイコンを使ってリーフレットの地図に気象ステーションの束を表示しようとしています。今、私は、描画部分のハンドルを取得しようとしています。

アイコンは涙形であり、風の向きに応じてアイコンの「円」部分を中心に回転する必要があります。

は私が考え出す苦労してるのセットアップ方法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

代替（マジックナンバーを使用して、ここでの）回転の中心を設定している：

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％に、原点を設定していますか？ 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'); 
 

 
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>