web-dev-qa-db-ja.com

CSSでSVG円をスタイルする

SVGサークルがあります。

<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%;
  }
csssvghovergeometry
19
Sebastian

SVG 1.1仕様に従って、CSSを使用してSVGサークルのr属性をスタイル設定することはできません https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties =。ただし、次のことができます。

<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

28
Peter Collingridge

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/

26
interestinglythere

その人がまだ答えを探しているかどうかはわかりませんが、他の人にとっては、CSS（3）で、円のtransform-Originをその中心に設定することで可能です。

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

}

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

CSSであるという注意事項は、寸法と結び付けられ、SVGの円の正確な中心を知る必要があります。

17
Anshul

上記のコメントでフィリップが示唆したように、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

5
Jonathan Sewell

これはあなたのために働くはずです。

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

    });
});
1
phonicx

これを使って ：

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

デモはこちら

1
Milind Anantwar

私は別のことに取り組んでいて、この質問に出会いました。私は同様のことをしており、greensockを使用しています。 Greensock、GSAPを使用して、いくつかの円のスケールをアニメーション化しました。 tranformOriginとscaleプロパティをアニメーション化する必要がありました。

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

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

Greensock https://greensock.com/

0
grmdgs

よくわかりませんが、CSSのみでsvgをフルカスタムすることはできません。ただし、実行する場合はクロスブラウザーにはなりません。以前は、複雑なマップを作成するためにsvgを使用していましたが、解決策は rapheljs でした。

編集：

半径iの@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>
0
stefanz

ストロークの色を忘れました：

circle:hover {
    stroke:white;
    stroke-width:10px;
 }
0
Miguel Alejandro Fuentes Lopez