css - CSS で SVG 円のスタイルを設定する

Question

だから私は私の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%;
  }

Answer 1

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

<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 では、rCSS を使用して円の属性をスタイル設定できます。https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Answer 2

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/

Answer 3

transform-円の原点をその中心に設定し、次にscale変換を使用することにより、CSS(3) で実行できます。

circle {
  transform-origin: center center;
}

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

Answer 4

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

Answer 5

これはうまくいくはずです。

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

    });
});

Answer 6

よくわかりませんが、cssだけでsvgを完全にカスタム化することはできません。ただし、そうする場合はクロスブラウザにはなりません。以前は、複雑なマップを作成するためにsvgを使用していましたが、私にとっての解決策はrapheljsでした。

編集：

半径に@phonicx微​​積分を使用して、コードを変更し、各円をカスタマイズできるものを追加しました（さらにある場合）：

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

Answer 7

JQUERY の使用:

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

デモはこちら

Answer 8

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

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