樣式SVG圈與CSS

所以我有我的SVG圈子。樣式SVG圈與CSS

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="168" cy="179" r="59" fill="white" /> 
</svg>

我想要它是120％，當一個盤旋圓。我嘗試了寬度，高度和中風。懸停時沒有找到任何解決方案來使圓圈更大。有什麼建議麼？

circle:hover 
    { 
    stroke-width:10px; 
    } 

circle:hover 
    { 
    height: 120%; 
    width: 120%; 
    }

來源

2013-01-10 Sebastian

不知道它的存在對SVG，但對於CSS3轉換？ – philipp

對於css變換+1，筆畫在OP示例中不起作用，因爲他沒有定義「筆觸」顏色。使用與圓形填充相同的顏色，它會看起來「更大」。 – cvsguimaraes

由於按照SVG 1.1規範則不能使用樣式CSS https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties的SVG圓的r屬性。但你可以這麼做：

<circle cx="168" cy="179" r="59" 
     fill="white" stroke="black" 
     onmouseover="evt.target.setAttribute('r', '72');" 
     onmouseout="evt.target.setAttribute('r', '59');"/>

在SVG 2，這部分是由一些現代瀏覽器的支持，您可以使用樣式CSS界的r屬性。 https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

來源

2013-01-10 12:36:02

'onmouseover =「this.setAttribute（'r'，'72'）;'應該也可以很好地工作 –

好的解決方案，即使它不是用CSS，謝謝！ – Sebastian

2016年的正確答案似乎是一個通過Anshul – Fanky

我不確定，但是你不能完全自定義只有CSS的svg。但是，如果你願意，它不會跨瀏覽器。在過去，我使用svg來創建複雜的地圖，對我而言，解決方案是rapheljs。

編輯：

使用@phonicx微積分半徑我修改了代碼，具有something這是能夠自定義每個圓圈（萬一如果你有更多）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle data-precentage='100' cx="168" cy="179" r="59" fill="red" /> 
    <circle data-precentage='120' cx="74" cy="100" r="59" fill="black" /> 
</svg>

來源

2013-01-10 10:29:59 stefanz

這應該爲你工作。

jsfiddle

你需要操縱半徑，這隻能通過JavaScript來實現：

$(function() { 
    $("svg circle").on("mouseenter", function() { 

     var oldR = $(this).attr("r"); 

     var newR = (((oldR*2)/100)*120)/2; // 120% width 

     $(this).attr("r", newR); 

    }); 
});

來源

2013-01-10 10:40:13 phonicx

它不會在mouseleave上轉到原始大小 –

是的，只需添加代碼以恢復mouseleave上的舊半徑，這是一個很好的答案。 –

有2個圈，使較大的可見性：隱藏或顯示：無。在懸停時，使可見較大，不可見較小。

來源

2013-01-10 10:42:14

使用此：

$(function() { 
$('circle').hover(function() { 
$(this).attr('r',100); 
},function(){ 
$(this).attr('r',59); 
}); 
});

Demo Here

來源

2013-01-10 10:42:26

想只使用CSS？使用line而不是circle。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <style> 
    .circle { 
     stroke-width: 59; 
     stroke-linecap: round; 
    } 
    .circle:hover { 
     stroke-width: 71; 
    } 
    </style> 
    <line x1="168" y1="179" x2="168" y2="179" stroke="white" class="circle" /> 
</svg>

http://jsfiddle.net/rLk7rd8b/

來源

2013-07-03 23:46:30 interestinglythere

+1很好的答案！我在' stofl

不完全（ – Ben

）下面是我看到的，它對我來說很像是圓形的。http://i.imgur.com/cKX9n3a.png @Ben，你用什麼瀏覽器？ – interestinglythere

正如菲利普建議在評論上面可以做到這一點與CSS 3變換。

circle:hover { 
    -webkit-transform: scale(x, y); 
    }

（「-webkit」前綴是針對Chrome只）

見https://developer.mozilla.org/en-US/docs/Web/CSS/transform

下面是使用CSS轉換工作的例子太多：http://jsbin.com/sozewiso/2

來源

2014-05-09 11:38:43

根據http：// caniuse .com /＃search = transform，但大多數供應商已經刪除了前綴，這個例外（在編寫本文時）是Safari，它仍然使用'-webkit' – rummik

你忘了筆觸顏色：

circle:hover { 
    stroke:white; 
    stroke-width:10px; 
}

來源

2014-06-04 14:45:00

嘗試了這個解決方案，但它在Chrome中很麻煩，有時候圓圈將只是一個輪廓。 – Ben

不確定如果這個人n仍然在尋找答案，但對於其他任何人，都可以在CSS（3）中完成，方法是將圓的變換原點設置爲中心。

circle { 
    transform-origin: 168px 179px; 
    transform: scale(1,1);

}

circle:hover 
{ 
stroke-width:10px; 
transform:scale(1.2,1.2); 
}

需要說明的是CSS現在加上尺寸，我們必須要知道在SVG圈的正中心。

來源

2014-10-31 14:51:20 Anshul

是的！ Plus前綴讓它跨瀏覽器（-o-transform-origin，-webkit-transform-origin，-moz-transform-origin，-o-transform，-webkit-transform，-moz-transform） – Fanky

稍有不同的情況，但它對我起作用爲「50％50％」，並從「scale（0,0）」轉換爲「scale（1,1）」。居中且仍未指定絕對大小。 – Ben

我正在處理其他事情，並且遇到了這個問題。我正在做類似的事情，並使用綠色環保。我使用Greensock，GSAP在兩個圓圈上製作了比例尺。我需要動畫tranformOrigin和規模屬性：

TweenMax.staggerFrom(".circle",1,{scale:0,transformOrigin:"50% 50%",ease:Bounce.easeOut}, .08);

例 https://codepen.io/grmdgs/pen/RgjdPv

使用GreenSock https://greensock.com/

來源

2017-06-27 22:22:36 grmdgs

樣式SVG圈與CSS

回答

相關問題