如何在“缩放”时保持viewBox居中。在SVG中？ [英] How to keep viewBox centered when "zooming" in SVGs?
问题描述
viewBox 属性来缩放一个SVG元素。缩放是通过对 viewBox 属性使用较低的宽度和 height 值来完成的，但是 x 和 y 的值很难找出保持场景居中的位置。 下面是一个片段，其中 viewBox =0 0 100 100。 （x y width height）这是我的出发点。该场景是从左上角开始缩放的。
< pre class =snippet-code-html lang-html prettyprint-override头> < link rel =stylesheethref =https://codepen.io/basement/pen/oepKxY.css>< / head>< body> < iframe src =https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQrid =grid>< / iframe> < div class =wrp> <！ - 下面的SVG相关代码 - > < svg xmlns =http://www.w3.org/2000/svgviewBox =0 0 100 100width =100height =100class =canvas> < DEFS> < style type =text / css> circle {fill：＃0ff;填充不透明度：0.25;笔画宽度：0.25;中风：＃0ee; }< / style> < / DEFS> < circle cx =37.5cy =50r =25/> < circle cx =62.5cy =50r =25/> < circle cx =50cy =71.65r =25/> < / SVG> < / div>< / body>
$ b
（可在整页中查看，片段响应）
放大
更改
50 。不过，我必须将 x 和 y 值都调整为 viewBox 维： 25 以保持图形居中。
viewBox = 25 25 50 50
< head> ; < link rel =stylesheethref =https://codepen.io/basement/pen/oepKxY.css>< / head>< body> < iframe src =https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQrid =grid>< / iframe> < div class =wrp> <！ - 下面的SVG相关代码 - > < svg xmlns =http://www.w3.org/2000/svgviewBox =25 25 50 50width =100height =100class =canvas> < DEFS> < style type =text / css> circle {fill：＃0ff;填充不透明度：0.25;笔画宽度：0.25;中风：＃0ee; }< / style> < / DEFS> < circle cx =37.5cy =50r =25/> < circle cx =62.5cy =50r =25/> < circle cx =50cy =71.65r =25/> < / SVG> < / div>< / body>
和高度不一致
遵循以下模式：将宽度和高度减半到场景中心：
viewBox =12.5 12.5 25 25应该继续缩放并保持居中。但它不保持中心。我的问题是SVG使用什么公式或技术，我总是能够用数学方法计算出我需要将特定的宽度的中心值放在什么 x 和 y 和 height 值在 viewBox ？
注意：我是了解图书馆，如 Snap.svg 和Raphaël。我试图避免图书馆了解基本原理。
还有一件事：我问你是否已经有一个 > width 和 height 值在 viewBox 中如何找到场景的中心坐标。反之亦然。
包含外部样式表用于视觉认知。这个问题的唯一相关代码与SVG元素有关。 解决方案
你的计算错了。如果 viewBox 的宽度和高度变小，则x和y值需要变大。
初始视框：0 0 100 100
变焦X2：25 25 50 50
变焦X4：37.5 37.5 25 25
要获得x或y值，您需要从最后（或原始）viewBox的中点减去新宽度或高度的一半。
缩放X2：center - newWidth / 2
=（100/2） - （50/2）= 25
放大X4：（100/2） - （25/2）= 37.5或
（25 + 50/2） - （25/2）= 37.5
另一个计算它的方法是从原始宽度中减去当前宽度并除以二。
< pre $
Zoom X4：（100 - 25）/ 2 = 37.5
<
< HEAD> < link rel =stylesheethref =https://codepen.io/basement/pen/oepKxY.css>< / head>< body> < iframe src =https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQrid =grid>< / iframe> < div class =wrp> <！ - 下面的SVG相关代码 - > < svg xmlns =http://www.w3.org/2000/svgviewBox =37.5 37.5 25 25width =100height =100class =canvas> < DEFS> < style type =text / css> circle {fill：＃0ff;填充不透明度：0.25;笔画宽度：0.25;中风：＃0ee; }< / style> < / DEFS> < circle cx =37.5cy =50r =25/> < circle cx =62.5cy =50r =25/> < circle cx =50cy =71.65r =25/> < / SVG> < / body>
Often I use the viewBox attribute to "zoom" a SVG element. Zoom is accomplished of course by using lower width and height values for the viewBox attribute - but the x and y values are tricky to figure out for keeping the scene centered.
Below is a snippet where viewBox="0 0 100 100". ( x y width height ) This is my starting point. The scene is to scale and starts at the top left corner.
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"
id="grid"
></iframe>
<div class="wrp">
<!-- SVG relevant code below-->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
circle {
fill: #0ff;
fill-opacity: 0.25;
stroke-width: 0.25;
stroke: #0ee;
}
</style>
</defs>
<circle cx="37.5" cy="50" r="25" />
<circle cx="62.5" cy="50" r="25" />
<circle cx="50" cy="71.65" r="25" />
</svg>
</div>
</body>
( Viewable in full page. Snippets are responsive )
Zooming in
Changing the width and height values to 50 in the viewBox zooms the scene. However I had to adjust the x and y values both to half the viewBox dimensions: 25 to keep the drawing centered.
viewBox="25 25 50 50"
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"
id="grid"
></iframe>
<div class="wrp">
<!-- SVG relevant code below-->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="25 25 50 50"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
circle {
fill: #0ff;
fill-opacity: 0.25;
stroke-width: 0.25;
stroke: #0ee;
}
</style>
</defs>
<circle cx="37.5" cy="50" r="25" />
<circle cx="62.5" cy="50" r="25" />
<circle cx="50" cy="71.65" r="25" />
</svg>
</div>
</body>
Halving the width and height isn't consistent
Following the pattern of halving the width and height to center the scene:
viewBox="12.5 12.5 25 25" should continue the zoom and stay centered. But it doesn't stay centered. My question is what formula or technique does SVG use that I can always figure out mathematically what x and y value I need to center a specific width and height value in the viewBox?
Note: I'm aware of libraries like Snap.svg and Raphaël. I'm avoiding libraries in an effort to understand the fundamentals.
One more thing: I'm asking if you already have a width and height value in the viewBox how do you find the center coordinates of the scene. Not vice versa.
External stylesheets were included for visual cognition. The only relevant code to this question is pertaining to the SVG elements.
Your calculations are wrong. If the width and height of the viewBox get smaller, the x and y values need to get bigger.
Initial viewBox: 0 0 100 100
Zoom X2: 25 25 50 50
Zoom X4: 37.5 37.5 25 25
To get the x or y values, you need to subtract half the new width or height from the halfway point of the last (or original) viewBox.
Zoom X2: centre - newWidth/2
= (100/2) - (50/2) = 25
Zoom X4: (100/2) - (25/2) = 37.5, or
(25 + 50/2) - (25/2) = 37.5
Another waty to calculate it is to subtract the current width from the original width and divide by two.
Zoom X4: (100 - 25) / 2 = 37.5
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"
id="grid"
></iframe>
<div class="wrp">
<!-- SVG relevant code below-->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="37.5 37.5 25 25"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
circle {
fill: #0ff;
fill-opacity: 0.25;
stroke-width: 0.25;
stroke: #0ee;
}
</style>
</defs>
<circle cx="37.5" cy="50" r="25" />
<circle cx="62.5" cy="50" r="25" />
<circle cx="50" cy="71.65" r="25" />
</svg>
</div>
</body>
这篇关于如何在“缩放”时保持viewBox居中。在SVG中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
