在SVG中放置一定角度的路徑

我有下面的代碼，其中包含使用（路徑）和一個圓圈繪製的三角形。我想在所有四個軸上放置三角形45度。我不知道如何在數學上做到這一點。圓的半徑可能會有所不同。那麼如何將三角形分別放置在四個位置上，如下圖所示？（三角形應該是圓圈內的單個像素）。在SVG中放置一定角度的路徑

.st0{fill:#F24343;}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t style="enable-background:new 0 0 22 14;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#F24343;} 
 
</style> 
 
    <circle cx="40" cy="40" r="20" fill="green"/> 
 
<path class="st0" d="M22,0H0l9.4,12.8c0.8,1.1,2.4,1.1,3.2,0L22,0z" style="transform: translate(22px,44px) rotate(45deg)"/> 
 
</svg> 
 

 
<circle cx="40" cy="40" r="20" fill="green"/>

來源

2016-08-04 Ashok kumar

您可以用CSS工作變換或SVG變換屬性來實現這一目標。

您可以通過將圓形和路徑放在標記中來旋轉路徑和圓形，並且可以使用CSS轉換來旋轉它。

<g class="rotate_me"> 
    <circle cx="40" cy="40" r="20" fill="green"/> 
    <path transform="rotate(5 50 50)" class="st0" d="M22,0H0l9.4,12.8c0.8,1.1,2.4,1.1,3.2,0L22,0z" style="transform: translate(22px,44px) rotate(45deg)"/> 
</g>

CSS：

.rotate_me { 
    transform: rotate(180deg); 
    transform-origin: 50% 50%; 
}

您還可以添加類路徑，並轉換原點，以獲得所需的價值發揮。

<path class="rotate_me" d="M 15.1929 28.9648 L 15.1929 11.8555 L 29.1138 20.4102 L 15.1929 28.9648 Z" fill="#74c190"/>

在IE9中不支持對SVG元素進行CSS轉換。您可以嘗試路徑元素的transform屬性。

<path transform="rotate(25 20 10)" d="M 15.1929 28.9648 L 15.1929 11.8555 L 29.1138 20.4102 L 15.1929 28.9648 Z" fill="#74c190"/>

你可能也想看看：https://css-tricks.com/snippets/css/css-triangle/

您可以參考codepen所有三個樣本這個粗糙樣本：http://codepen.io/priyanka-herur/pen/yJRYZV

來源

2016-08-04 09:05:38 Priyanka

角度值是在'旋轉（）'函數的第一個參數。你不必做任何數學。 –

明白了@PaulLeBeau謝謝。 :) –

您正在製作自己的生活困難通過定義指針三角在一些奇怪的地方遠離需要的地方。

如果您將三角形定義在正常的「0」位置，您可以輕鬆地將它指向您想要的位置（見下文）。

rotate()的第一個值是角度，另外兩個座標是旋轉中心。在你的情況下，這是40,40（圓的中心）。

.st0{fill:#F24343;}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t style="enable-background:new 0 0 22 14;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#F24343;} 
 
</style> 
 
    <circle cx="40" cy="40" r="20" fill="green"/> 
 
    <path class="st0" d="M28,21 L 52,21, L40,8 Z" transform="rotate(45, 40,40)"/> 
 
</svg>

來源

2016-08-04 09:47:12

在SVG中放置一定角度的路徑

回答

相關問題