圍繞軸點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>