Question

除了所有其他代码之外，此问题仅与第8行末尾的SVG viewBox属性有关：viewBox="0 0 100 100。

问题是：我可以使用什么公式来选择任意点并专门放大该点，使viewBox保持居中。

例如，如果我将代码更改为viewBox="0 0 50 50"，则SVG将缩放50％，但它将以点0, 0为中心 - 这将是居中的点。我可以随着时间的推移弄乱数字并找到中心点，但我的问题是我可以使用什么公式来保持它以一个独特的点为中心？

Scenerio ：如果我知道我想缩放到两倍大小并将viewBox尺寸设置为50 50如何在viewBox找到正确的X和Y坐标{1}}让SVG以( 70, 74 )

等任意点为中心

当缩放设置为viewBox时，如何将( 70,74 )置于点50 50的中心位置。

viewBox( ? ? 50 50 ) - ( 70, 74 )的中心。如何找到缺失的X和Y值？

＆＃13;

circle {
  animation-name: pulse;
  animation-duration: 4s;
  animation-delay: 0;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: 50% 50%;
}
circle + circle {
  transform: scale( 0.25 );
  animation-duration: 8s;
}
@keyframes pulse {
  100% {
    transform: scale( 2 );
    opacity: 0;
  }
}

＆＃13;

<head>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://codepen.io/basement/pen/qXMRxX.css">
</head>

<body>
  <div class="wrp">

    <svg xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 100 100"
         width="100" height="100"
         class="canvas"
    > <!-- How do I zoom 200% and keep viewBox centered on point ( 70, 74 )? -->

      <script xlink:href="https://codepen.io/basement/pen/qXMRxX.js"></script>

      <circle cx="70" cy="74" r="0.5" fill="#f46" />
      <circle cx="70" cy="74" r="0.5" fill="#f46" />
    </svg>

  </div>
</body>

＆＃13;

请注意：How to keep viewBox centered when "zooming" in SVGs?问题是如何保持viewBox仅以整个SVG的中心点为中心。目前的问题是关于如何将其保持在特定任意点的中心，而不仅仅是图纸的中心点。

注意：我并没有真正使用任何库来试图理解未来项目背后的基础数学。谢谢。

编辑：链接问题中提供的公式为：centre - newWidth/2。但这似乎不适用于此。在这种情况下，点( 70, 74 )是中心。因此对于X值70 - newWidth/2因为我们在这里缩放2倍，所以我们知道newWidth是50（100的一半）。因此，50/2 = 25，70-25 = 45代表X，而74-25 = 49代表Y.但viewBox="45 49 50 50"偏离中心。点( 70, 74 )位于中心下方，相对于viewBox太远。 JSFiddle：jsfiddle.net/dndvzj8f。我究竟做错了什么？相关答案的解决方案似乎无法在此处运作。

使用SVG viewBox进行缩放时，以特定点为中心

0 个答案: