<svg width="100" height="200" viewBox="0 0 50 50" style="border: 1px solid #cccccc;">
<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;" />
</svg>ビューボックスの幅を50で、高さは50です。ビューボックスの幅に比例して、実際の幅IEの2単位です100/50 = 2であり、高さは実際の高さIの4単位である。 200/50 = 4。
ここで私が知りたいのは、cx、cy、rの中の25の実際の値は何ですか？それはすべてですか？25*2 = 50？ビューボックスの高さから継承していないものはどれですか？そうでなければどうして？
今私が知りたいですものですcx、cyとrの内部の25の実際の値??それは全部で25 * 2 = 50ですか？
いいえSVGは、viewBoxのように正方形ではありません。したがって、SVGの内容は単純に2倍になるわけではありません。
SVGを見るとわかります。円は、100×200のビューポートの中心に垂直に配置されています。既定のスケーリング規則（preserveAspectRatio属性で変更可能）を使用すると、内容が最小の幅と高さにスケールアップされています。この場合、それは幅です。高さが幅よりも大きいので、サークルは垂直にセンタリングされます。
最終的な結果は、（0,50）から（100,150）までの領域を占める円になります。
だから、効果的な変換cxの値、cy、rは50あり、100、50ことを言うことができます。
は、ビューボックスの高さから継承していない3つのうちどれですか？そうでなければどうして？
viewBoxから「継承」するものはありません。 viewBox,widthおよびheightの相互作用は、initial coordinate systemの変換をもたらす。この変換は、SVG内のオブジェクトのスケールと位置に影響します。
私は値を決定するための最良の手段は次のように円上getBBox（）を実行することであると信じて：
<!DOCTYPE HTML>
<html>
<head>
<title>ViewBox</title>
</head>
<body onload=showBB()>
<svg width="100" height="200" viewBox="0 0 50 50" style="border: 1px solid #cccccc;">
<circle id=myCircle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;" />
</svg>
<script>
function showBB()
{
var bb=myCircle.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var cx=bbx+5*bbw
var cy=bby+5*bbh
var r=.5*bbw
console.log("r="+r+" cx="+cx+" cy="+cy)
}
</script>
</body>
</html>
ありがとうございます。私はあなたの答えを2回以上見ていきますが、どこに値段があるのか教えてください。またはrの実際の値は何ですか？ –
'r 'の実際の値はファイルごとに25です。しかし、幅と高さとviewBoxの組み合わせに起因するスケーリングのため、有効半径50でレンダリングされます。 –
50x50のviewBox（およびそれに対応するSVGコンテンツ領域）は、SVG幅に合うように拡大されます100ピクセルのしかし、あなたのSVGの高さは200pxなので、viewBoxも翻訳されて縦にセンタリングされます。したがって、サークルの上下に50ピクセルの「スペース」があります。それで、私は、 'cy'の有効な変換値が50 + 50 = 100であると言ったのです。 –