那些遇到过的问题

如何放大复杂的svg结构

dag*_*da1 11 svg reactjs

我有一组复杂的形状在片段中.它们是用React渲染的,但我真的只是在寻找一些关于如何能够放大和缩小这些形状的指针.

我的谷歌搜索失败了,我只能找到图表的例子.

如何放大和缩小这样的复杂结构？ 

    <svg height="767" width="903">
    <g class="vx-group vx-tree" transform="translate(20, 70)">
        <g class="vx-group" transform="translate(0, 70)">
            <g class="vx-group" transform="translate(0, 0)">
                <path class="vx-link-vertical" d="M451.5,0C451.5,233.5,451.5,233.5,451.5,467" percent="0.5"
                      stroke="#f7f7f3" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
            </g>
            <g class="vx-group" transform="translate(0, 0)">
                <g class="vx-group" transform="translate(451.5, 0)" opacity="1">
                    <g class="vx-group node__container" transform="translate(0, 0)">
                        <svg class="" x="0" y="0" style="overflow: visible;">
                            <polygon
                                    points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30"
                                    class="node__hexagon"></polygon>
                        </svg>
                        <g class="vx-group node__business-unit" transform="translate(0, 0)">
                            <use xlink:href="#icon-BusinessUnit"></use>
                        </g>
                        <g class="hierarchy-label__container" transform="translate(0, -40)">
                            <path class="" d="
                                  M 0.0078125, 5.15625
                                  L 34.64882865137755,25.156249999999996 
                                  M -0.9921875, 5.15625 
                                  L -34.63320365137754,25.156249999999996
                                  H -65.8515625 
                                  a8,8 0 0 1 -8,-8  
                                  V -47.15625 
                                  a8,8 0 0 1 8,-8 H 65.8515625 a8,8 0 0 1 8,8 
                                  L 73.8515625, 17.156249999999996  
                                  a8,8 0 0 1 -8,8 
                                  L 34.64882865137755, 25.156249999999996 
                                  Z 
                                 ">
                            </path>
                            <svg x="0" y="0" style="overflow: visible;">
                                <text class="hierarchy-label__item__name" width="150" y="-25" x="0" text-anchor="middle"
                                      style="pointer-events: none;">
                                    <tspan x="0" dy="0em">Finance</tspan>
                                </text>
                            </svg>
                            <svg x="0" y="0" style="overflow: visible;">
                                <text class="hierarchy-label__item__type" width="150" y="-5" x="0" text-anchor="middle"
                                      style="pointer-events: none;">
                                    <tspan x="0" dy="0.71em">Business Unit</tspan>
                                </text>
                            </svg>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
Run Code Online (Sandbox Code Playgroud)

Acc*_*ied 7

svg中的缩放是使用viewBox完成的,它结合了缩放和偏移.有一篇很好的文章如何扩展SVG.来自以下文章:

如果您将文档视为画布,则视图框是您希望查看者看到的画布的一部分.

它就像是相机应用程序中的手机屏幕,显示了使用指定比例和偏移观察到的部分场景.

在此输入图像描述

很好的示例演示了什么是viewBox可以在这里找到.

一点点数学和我用鼠标轮实现放大/缩小.此外,还添加了使用鼠标移动和显示比例值的平移.演示如何使用viewBox的示例:

const svgImage = document.getElementById("svgImage");
const svgContainer = document.getElementById("svgContainer");

var viewBox = {x:0,y:0,w:svgImage.getAttribute("width"),h:svgImage.getAttribute("height")};
svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
const svgSize = {w:svgImage.getAttribute("width"),h:svgImage.getAttribute("height")};
var isPanning = false;
var startPoint = {x:0,y:0};
var endPoint = {x:0,y:0};;
var scale = 1;

svgContainer.onmousewheel = function(e) {
   e.preventDefault();
   var w = viewBox.w;
   var h = viewBox.h;
   var mx = e.x;//mouse x  
   var my = e.y;    
   var dw = w*Math.sign(e.deltaY)*0.05;
   var dh = h*Math.sign(e.deltaY)*0.05;
   var dx = dw*mx/svgSize.w;
   var dy = dh*my/svgSize.h;
   viewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w-dw,h:viewBox.h-dh};
   scale = svgSize.w/viewBox.w;
   zoomValue.innerText = `${Math.round(scale*100)/100}`;
   svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
}


svgContainer.onmousedown = function(e){
   isPanning = true;
   startPoint = {x:e.x,y:e.y};   
}

svgContainer.onmousemove = function(e){
   if (isPanning){
  endPoint = {x:e.x,y:e.y};
  var dx = (startPoint.x - endPoint.x)/scale;
  var dy = (startPoint.y - endPoint.y)/scale;
  var movedViewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w,h:viewBox.h};
  svgImage.setAttribute('viewBox', `${movedViewBox.x} ${movedViewBox.y} ${movedViewBox.w} ${movedViewBox.h}`);
   }
}

svgContainer.onmouseup = function(e){
   if (isPanning){ 
  endPoint = {x:e.x,y:e.y};
  var dx = (startPoint.x - endPoint.x)/scale;
  var dy = (startPoint.y - endPoint.y)/scale;
  viewBox = {x:viewBox.x+dx,y:viewBox.y+dy,w:viewBox.w,h:viewBox.h};
  svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
  isPanning = false;
   }
}

svgContainer.onmouseleave = function(e){
 isPanning = false;
}
Run Code Online (Sandbox Code Playgroud) 
<span id="zoomValue">1</span>
<div id="svgContainer">
<svg id="svgImage" height="964" width="767">
    <g  class="vx-group vx-tree" transform="translate(20, 70)">
        <g class="vx-group" transform="translate(0, 70)">
            <g class="vx-group" transform="translate(0, 0)">
                <path class="vx-link-vertical" d="M451.5,0C451.5,233.5,451.5,233.5,451.5,467" percent="0.5" stroke="#f7f7f3" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
            </g>
            <g class="vx-group" transform="translate(0, 0)">
                <g class="vx-group" transform="translate(451.5, 0)" opacity="1">
                    <g class="vx-group node__container" transform="translate(0, 0)">
                        <svg class="" x="0" y="0" style="overflow: visible;">
                            <polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon>
                        </svg>
                        <g class="vx-group node__business-unit" transform="translate(0, 0)">
                            <use xlink:href="#icon-BusinessUnit"></use>
                        </g>
                        <g class="hierarchy-label__container" transform="translate(0, -40)">
                           <path class="" d="
                              M 0.0078125, 5.15625
                              L 34.64882865137755,25.156249999999996 
                              M -0.9921875, 5.15625 
                              L -34.63320365137754,25.156249999999996
                              H -65.8515625 
                              a8,8 0 0 1 -8,-8  
                              V -47.15625 
                              a8,8 0 0 1 8,-8 H 65.8515625 a8,8 0 0 1 8,8 
                              L 73.8515625, 17.156249999999996  
                              a8,8 0 0 1 -8,8 
                              L 34.64882865137755, 25.156249999999996 
                              Z 
                             "></path>
     			          <svg x="0" y="0" style="overflow: visible;">
     			              <text class="hierarchy-label__item__name" width="150" y="-25" x="0" text-anchor="middle" style="pointer-events: none;">
     			                  <tspan x="0" dy="0em">Finance</tspan>
     			              </text>
     			          </svg>
             			  <svg x="0" y="0" style="overflow: visible;">
             			      <text class="hierarchy-label__item__type" width="150" y="-5" x="0" text-anchor="middle" style="pointer-events: none;">
             			          <tspan x="0" dy="0.71em">Business Unit</tspan>
             			      </text>
             			  </svg>
                       </g>
                   </g>
               </g>
           </g>
       </g>
   </g>
   </svg>
</div>
Run Code Online (Sandbox Code Playgroud)

数学:

在此输入图像描述

  • 感谢您对这篇文章！它让我很快就开始使用缩放和平移功能！我在关于状态机的node-red包中使用了它[这里](https://github.com/sonntam/node-red-contrib-xstate-machine/blob/master/src/smxstate-client-util.js ）。一个小的补充：如果宽度/高度以“pt”或“px”等单位给出，则代码会出现问题。我必须使用 `.clientWidth` 和 `.clientHeight` DOM 属性来使其在我的用例中正常工作。 (2认同)
  • @sonntam 很高兴它很有帮助，我花了几个小时来实现代码，又花了几个小时来修复错误。请随意编辑我的答案，我会批准。 (2认同)

Chr*_*ras 6

你可以简单地使用 transform来缩放.将transform-origin从那里你要"销"缩放原点和使用scale(x)中transform在使用与最小值的范围内输入元素上面的例子一样1,并最大限度地200从scalling 1%到200%:

const slider = document.getElementById("zoomRange");
const zvgZoom = document.getElementById("svgZoom");
const zoomValue = document.getElementById("zoomValue");

slider.oninput = function() {
    //console.log('zoom', this.value / 100);
    zoomValue.innerText = `${this.value}%`;
    zvgZoom.style.transform = `scale(${this.value / 100})`;
}
Run Code Online (Sandbox Code Playgroud) 
#svgContainer {
    background-color: #dedede;
}

#svgZoom {
    transform-origin: 0% 0%;
}
Run Code Online (Sandbox Code Playgroud) 
<input type="range" min="1" max="200" value="100" class="slider" id="zoomRange">
<span id="zoomValue">100%</span>

<div id="svgContainer">
    <svg id="svgZoom" height="767" width="903">
        <g  class="vx-group vx-tree" transform="translate(20, 70)">
            <g class="vx-group" transform="translate(0, 70)">
                <g class="vx-group" transform="translate(0, 0)">
                    <path class="vx-link-vertical" d="M451.5,0C451.5,233.5,451.5,233.5,451.5,467" percent="0.5" stroke="#f7f7f3" stroke-width="1" stroke-opacity="0.2" fill="none"></path>
                </g>
                <g class="vx-group" transform="translate(0, 0)">
                    <g class="vx-group" transform="translate(451.5, 0)" opacity="1">
                        <g class="vx-group node__container" transform="translate(0, 0)">
                            <svg class="" x="0" y="0" style="overflow: visible;">
                                <polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class="node__hexagon"></polygon>
                            </svg>
                            <g class="vx-group node__business-unit" transform="translate(0, 0)">
                                <use xlink:href="#icon-BusinessUnit"></use>
                            </g>
                            <g class="hierarchy-label__container" transform="translate(0, -40)">
                               <path class="" d="
                                  M 0.0078125, 5.15625
                                  L 34.64882865137755,25.156249999999996 
                                  M -0.9921875, 5.15625 
                                  L -34.63320365137754,25.156249999999996
                                  H -65.8515625 
                                  a8,8 0 0 1 -8,-8  
                                  V -47.15625 
                                  a8,8 0 0 1 8,-8 H 65.8515625 a8,8 0 0 1 8,8 
                                  L 73.8515625, 17.156249999999996  
                                  a8,8 0 0 1 -8,8 
                                  L 34.64882865137755, 25.156249999999996 
                                  Z 
                                 "></path>
         			          <svg x="0" y="0" style="overflow: visible;">
         			              <text class="hierarchy-label__item__name" width="150" y="-25" x="0" text-anchor="middle" style="pointer-events: none;">
         			                  <tspan x="0" dy="0em">Finance</tspan>
         			              </text>
         			          </svg>
                 			  <svg x="0" y="0" style="overflow: visible;">
                 			      <text class="hierarchy-label__item__type" width="150" y="-5" x="0" text-anchor="middle" style="pointer-events: none;">
                 			          <tspan x="0" dy="0.71em">Business Unit</tspan>
                 			      </text>
                 			  </svg>
                           </g>
                       </g>
                   </g>
               </g>
           </g>
       </g>
   </svg>
</div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

2041 次

最近记录：

6 年，11 月 前
相关归档
我在哪里从React Redux应用程序中的服务器获取初始数据？ 49
下一个/路由器和下一个/导航有什么区别？ 25
访问this.props in in react ComponentDidMount 17
在生产中使用 Tailwind CDN 有多糟糕？ 16
如何显示/隐藏ReactJS组件 15
比较 componentDidUpdate 中的 PrevProps 13
在同一浏览器上下文中检测到多个 GoTrueClient 实例 12
将 ES2019 转换为 React JSX 10
如何使用CSS或必要的SVG创建这个喇叭形外观？ 6
为什么嵌入式 SVG 在桌面上会导致 CLS（累积布局偏移），但在移动设备上不会？ 5
难疑归档
如何检查文件是否存在而没有例外？ 5290
使用Git将特定文件重置或还原到特定版本？ 4255
如何水平居中<div>？ 4116
如何检查列表是否为空？ 3235
如何在Java中将String转换为int？ 2882
为什么"使用命名空间std"被认为是不好的做法？ 2486
如何检查字符串是否包含Bash中的子字符串 2332
什么是TypeScript,为什么我会用它代替JavaScript？ 1637
在Python中将整数转换为字符串？ 1282
如何随机化(shuffle)一个JavaScript数组？ 1138