html - 如何在 SVG 中的 "zooming"时保持 viewBox 居中？-6ren

html - 如何在 SVG 中的 "zooming"时保持 viewBox 居中？

转载作者：行者123 更新时间：2023-11-27 23:11:34

我经常使用 viewBox “缩放”SVG 元素的属性。缩放当然是通过为 viewBox 使用较低的宽度和高度值来实现的。属性 - 但 x 和 y 值很难弄清楚以保持场景居中。

下面是一个片段，其中 viewBox="0 0 100 100" . ( x y width height ) 这是我的起点。场景是按比例缩放的，从左上角开始。

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

(可在整页中查看。片段是响应式的)

放大

将宽度和高度值更改为50在viewBox缩放场景。但是我不得不调整 x和 y值均为 viewBox 的一半尺寸:25使绘图居中。

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>

将宽度和高度减半不一致

按照将宽度和高度减半的模式使场景居中:

viewBox="12.5 12.5 25 25"应该继续缩放并保持居中。但它不会保持居中。我的问题是 SVG 使用什么公式或技术，我总是可以从数学上计算出我需要什么 x 和 y 值来居中特定的 width和 viewBox 中的 height 值？

注意:我知道像 Snap.svg 这样的库和 Raphaël .我正在避开图书馆以努力了解基础知识。

还有一件事:我想问您在 viewBox 中是否已经有了宽度和高度值你如何找到场景的中心坐标。反之则不然。

包含用于视觉认知的外部样式表。与此问题唯一相关的代码与 SVG 元素有关。

最佳答案

你的计算有误。如果 viewBox 的宽度和高度变小，则 x 和 y 值需要变大。

Initial viewBox:  0 0 100 100
Zoom X2:          25 25 50 50
Zoom X4:          37.5 37.5 25 25

要获得 x 或 y 值，您需要从最后一个(或原始)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

另一种计算方法是将原始宽度减去当前宽度并除以二。

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>