Javascript 使用SVG的一部分在缩放时裁剪另一部分
当SVG被放大时，我试图裁剪它。我的缩放功能正常工作（在我的实际应用程序中，它在Javascript 使用SVG的一部分在缩放时裁剪另一部分,javascript,jquery,html,css,svg,Javascript,Jquery,Html,Css,Svg,当SVG被放大时，我试图裁剪它。我的缩放功能正常工作（在我的实际应用程序中，它在touchstart上，而不是在click上，并缩放到用户点击的位置）。我的SVG由路径、链接图像和矩形边框组成。我希望SVG可以缩放，但不能缩放边框，这样缩放后的SVG路径和图像就会被边框裁剪 下面是一个带有简化代码的示例 这是我的脚本（再次，稍微简化）： 这可以通过CSS或添加SVG过滤器来实现吗 更新： 以下是我的SVG和HTML代码： <body onload="init()"> <svg
touchstartclick<body onload="init()">
<svg width="198.4375mm" height="124.08958mm" viewBox="0 0 703.125 439.6875" id="mySVG" version="1.1">
<defs id="defs1">
</defs>
<g id="svgGroup" transform="matrix(1, 0, 0, 1, 0,-612.67468)">
<image xlink:href="http://cs1.ucc.ie/~jid1/MSCIM_Project/starry.jpg" y="612.67468" x="0" id="image1" style="image-rendering:optimizeQuality" preserveAspectRatio="none" height="439.6875" width="703.125" />
<g class="default" id="default">
<path id="path1" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5.00000048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 420.78485,1027.2895 c 2.43346,0.9078 19.41957,-1.2927 20.71221,0 1.93106,1.931 -0.29486,5.951 1.09012,8.7209 1.82338,3.6468 3.27035,8.3741 3.27035,11.9913 m -54.50582,-32.7035 c 0.70015,-19.70598 1.09012,-38.79454 1.09012,-58.86628 0,-2.68707 -1.63014,-12.54137 0,-14.17151 1.0153,-1.01531 1.09012,0.0855 1.09012,-2.18024 0,-5.40692 1.09011,-10.31592 1.09011,-15.26163 0,-2.18023 -2.18023,-6.54069 0,-6.54069 0.37756,0 1.09012,6.96706 1.09012,7.63081 0,3.71287 3.27035,6.95984 3.27035,10.90116 0,4.19093 0.79648,7.84004 2.18023,11.99128 2.21787,6.65362 0,17.99256 0,25.07268 0,6.65109 3.66473,25.46705 6.5407,28.34302 1.6604,1.6604 -0.0224,6.4959 1.09011,8.7209 1.5112,3.0224 7.20974,4.6085 8.72093,7.6308 0.57185,1.1437 -0.87008,4.5805 0,5.4506 1.90356,1.9036 3.27035,1.3451 3.27035,5.4506 0,3.7358 0.30978,11.2109 2.18024,13.0814 1.24456,1.2446 0,6.1402 0,5.4506 0,-0.7268 0,-1.4535 0,-2.1802 m -70.85756,-1.0902 c -1.06048,-4.4059 -3.98459,-12.743 -3.27035,-14.1715 0.36337,-0.7267 1.72952,-0.414 2.18023,-1.0901 1.95753,-2.9363 2.20843,-4.3746 4.36047,-5.4506 5.26747,-2.6337 13.32014,-21.1379 16.35174,-19.6221 4.328,2.164 9.1024,8.0123 11.99128,10.9012 0.90843,0.9084 -0.90843,4.5421 0,5.4506 0.20728,0.2072 4.36047,2.6012 4.36047,3.2703 0,0.3634 -1.09012,-0.3634 -1.09012,0 0,0.8876 2.53613,5.0947 1.09012,6.5407 -1.17399,1.174 -1.09012,1.8418 -1.09012,4.3605 0,4.1457 -0.49432,11.0026 0,11.9913 0.1625,0.325 1.09012,-0.3634 1.09012,0 0,0.3633 -0.72675,0 -1.09012,0"
/>
</g>
<g class="zoomed" id="zoomed">
<path d="m 340.11625,807.08599 c 7.76279,6.53866 17.84414,11.31088 28.34302,9.81104 6.74173,-0.9631 12.76004,-4.16764 18.53198,-7.63081 18.01677,-10.81007 34.4538,-24.73489 55.59593,-29.43314 26.56507,-5.90335 79.92458,-17.49371 91.56977,17.44186 1.81015,5.43046 3.72523,14.53219 2.18023,20.71221 -2.02545,8.10179 -7.88,12.46368 -13.0814,18.53198 -13.55148,15.81006 -50.16811,27.21307 -63.22674,4.36046 -5.1667,-9.04172 -7.92927,-33.69412 5.45058,-38.15407 3.73491,-1.24497 7.76344,0 9.81105,0 M 144.98544,705.70517 c 20.66421,-0.95014 38.30236,-13.77995 57.77616,-19.62209 18.75686,-5.62706 -4.83951,1.56225 11.99128,-5.45058 13.98728,-5.82804 30.02691,-10.14783 44.69476,-13.0814 7.97614,-1.59522 16.05228,-5.64824 23.98256,-7.63081 10.57355,-2.64339 21.85929,-3.27035 32.70349,-3.27035 7.69215,0 16.30798,-0.56694 21.80233,2.18023 0.85994,0.97503 2.29532,-0.48751 3.27035,0 10.65465,5.32733 25.4596,13.81992 37.06395,19.6221 1.97848,0.98924 4.93594,6.58125 6.5407,8.72093 2.35817,3.14423 5.81084,5.08098 7.63081,8.72093 1.55086,3.10172 2.30259,6.90777 3.27035,9.81104 0.82228,2.46683 -1.15505,6.41084 0,8.72093 1.62495,3.24991 -0.0458,6.40342 1.09012,9.81105 4.37353,13.1206 0.84586,36.97461 -10.90117,45.78488 -11.31173,8.4838 -24.2763,9.88448 -37.06395,13.0814 -4.00205,1.00051 -10.12058,0 -14.17151,0 -16.5709,0 -28.01349,-1.72421 -30.52326,-21.80233 -1.39553,-11.16428 -1.75785,-28.7654 6.5407,-37.06395 2.31006,-2.31006 15.37703,-9.81105 17.44186,-9.81105 0.72674,0 0,1.45349 0,2.18024 M 8.7208997,691.53366 c 2.1602653,7.29453 4.7377483,9.09821 8.7209293,13.0814 1.684353,1.68435 1.981662,4.16189 3.270349,5.45058 2.208978,2.20897 6.74082,3.47047 8.720931,5.45058 1.278806,1.27881 9.007526,0.2866 10.901162,2.18023 2.906977,2.90698 14.534884,-2.90697 17.441861,0 2.859952,2.85995 26.084066,0.0787 28.343023,-2.18023 0.691474,-0.69147 3.452847,0.45381 4.360465,0 4.163663,-2.08183 11.5143,-3.88348 14.17151,-6.5407 0.51389,-0.51388 1.53022,0.32501 2.18024,0 4.12737,-2.06368 14.17151,-3.48543 14.17151,-7.63081"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5.00000048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path2" />
</g>
</g>
<rect style="fill:none;fill-opacity:1;stroke:#00ff00;stroke-width:7.08661413;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="703.12494" height="439.68747" x="3.5432765" y="-1.9432737" id="borderRect" />
</svg>
<div id="uiDiv">
<button id="zoom">Zoom</button>
</div>
快速移动
函数init（）{
var zoomed=false；
var矩阵；
变量路径=$（“路径”）；
var transMatrix=$（“#svgGroup”）.attr（“transform”）.replace（/[^0-9.，]+/，”）；
transMatrix=transMatrix.split（“，”）；
var origMatrix=[parseFloat（transMatrix[0]）、parseFloat（transMatrix[1]）、parseFloat（transMatrix[2]）、parseFloat（transMatrix[3]）、parseFloat（transMatrix[4]）、parseFloat（transMatrix[5]）；
var initialValue=origMatrix.slice（0）；
$（“.zomed”）.hide（）；
$（“#缩放”）。单击（函数（）{
缩放（）；
});
函数zoom（）{
如果（缩放==假）{
对于（变量i=0；i#uiDiv{
利润率最高：1%；
浮动：对；
位置：固定；
最高：20%；
右：0；
宽度：19%；
身高：99%；
溢出：隐藏；
}
svg{
位置：固定；
排名：0；
左：0；
浮动：左；
宽度：80%；
身高：99%；
左缘：1%；
溢出：隐藏；
}
钮扣{
宽度：80%；
身高：15%；
利润率：5%；
字号：2em；
边界：无；
颜色：白色；
文本对齐：居中；
文字装饰：无；
背景颜色：蓝色；
}
快速移动
No wrap-in#uiDiv {
margin-top: 1%;
float: right;
position: fixed;
top: 20%;
right: 0;
width: 19%;
height: 99%;
overflow: hidden;
}
svg {
position: fixed;
top: 0;
left: 0;
float: left;
width: 80%;
height: 99%;
margin-left: 1%;
overflow: hidden;
}
button {
width: 80%;
height: 15%;
margin: 5%;
font-size: 2em;
border: none;
color: white;
text-align: center;
text-decoration: none;
background-color: blue;
}
<body onload="init()">
<svg width="198.4375mm" height="124.08958mm" viewBox="0 0 703.125 439.6875" id="mySVG" version="1.1">
<defs id="defs1">
</defs>
<g id="svgGroup" transform="matrix(1, 0, 0, 1, 0,-612.67468)">
<image xlink:href="http://cs1.ucc.ie/~jid1/MSCIM_Project/starry.jpg" y="612.67468" x="0" id="image1" style="image-rendering:optimizeQuality" preserveAspectRatio="none" height="439.6875" width="703.125" />
<g class="default" id="default">
<path id="path1" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5.00000048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 420.78485,1027.2895 c 2.43346,0.9078 19.41957,-1.2927 20.71221,0 1.93106,1.931 -0.29486,5.951 1.09012,8.7209 1.82338,3.6468 3.27035,8.3741 3.27035,11.9913 m -54.50582,-32.7035 c 0.70015,-19.70598 1.09012,-38.79454 1.09012,-58.86628 0,-2.68707 -1.63014,-12.54137 0,-14.17151 1.0153,-1.01531 1.09012,0.0855 1.09012,-2.18024 0,-5.40692 1.09011,-10.31592 1.09011,-15.26163 0,-2.18023 -2.18023,-6.54069 0,-6.54069 0.37756,0 1.09012,6.96706 1.09012,7.63081 0,3.71287 3.27035,6.95984 3.27035,10.90116 0,4.19093 0.79648,7.84004 2.18023,11.99128 2.21787,6.65362 0,17.99256 0,25.07268 0,6.65109 3.66473,25.46705 6.5407,28.34302 1.6604,1.6604 -0.0224,6.4959 1.09011,8.7209 1.5112,3.0224 7.20974,4.6085 8.72093,7.6308 0.57185,1.1437 -0.87008,4.5805 0,5.4506 1.90356,1.9036 3.27035,1.3451 3.27035,5.4506 0,3.7358 0.30978,11.2109 2.18024,13.0814 1.24456,1.2446 0,6.1402 0,5.4506 0,-0.7268 0,-1.4535 0,-2.1802 m -70.85756,-1.0902 c -1.06048,-4.4059 -3.98459,-12.743 -3.27035,-14.1715 0.36337,-0.7267 1.72952,-0.414 2.18023,-1.0901 1.95753,-2.9363 2.20843,-4.3746 4.36047,-5.4506 5.26747,-2.6337 13.32014,-21.1379 16.35174,-19.6221 4.328,2.164 9.1024,8.0123 11.99128,10.9012 0.90843,0.9084 -0.90843,4.5421 0,5.4506 0.20728,0.2072 4.36047,2.6012 4.36047,3.2703 0,0.3634 -1.09012,-0.3634 -1.09012,0 0,0.8876 2.53613,5.0947 1.09012,6.5407 -1.17399,1.174 -1.09012,1.8418 -1.09012,4.3605 0,4.1457 -0.49432,11.0026 0,11.9913 0.1625,0.325 1.09012,-0.3634 1.09012,0 0,0.3633 -0.72675,0 -1.09012,0"
/>
</g>
<g class="zoomed" id="zoomed">
<path d="m 340.11625,807.08599 c 7.76279,6.53866 17.84414,11.31088 28.34302,9.81104 6.74173,-0.9631 12.76004,-4.16764 18.53198,-7.63081 18.01677,-10.81007 34.4538,-24.73489 55.59593,-29.43314 26.56507,-5.90335 79.92458,-17.49371 91.56977,17.44186 1.81015,5.43046 3.72523,14.53219 2.18023,20.71221 -2.02545,8.10179 -7.88,12.46368 -13.0814,18.53198 -13.55148,15.81006 -50.16811,27.21307 -63.22674,4.36046 -5.1667,-9.04172 -7.92927,-33.69412 5.45058,-38.15407 3.73491,-1.24497 7.76344,0 9.81105,0 M 144.98544,705.70517 c 20.66421,-0.95014 38.30236,-13.77995 57.77616,-19.62209 18.75686,-5.62706 -4.83951,1.56225 11.99128,-5.45058 13.98728,-5.82804 30.02691,-10.14783 44.69476,-13.0814 7.97614,-1.59522 16.05228,-5.64824 23.98256,-7.63081 10.57355,-2.64339 21.85929,-3.27035 32.70349,-3.27035 7.69215,0 16.30798,-0.56694 21.80233,2.18023 0.85994,0.97503 2.29532,-0.48751 3.27035,0 10.65465,5.32733 25.4596,13.81992 37.06395,19.6221 1.97848,0.98924 4.93594,6.58125 6.5407,8.72093 2.35817,3.14423 5.81084,5.08098 7.63081,8.72093 1.55086,3.10172 2.30259,6.90777 3.27035,9.81104 0.82228,2.46683 -1.15505,6.41084 0,8.72093 1.62495,3.24991 -0.0458,6.40342 1.09012,9.81105 4.37353,13.1206 0.84586,36.97461 -10.90117,45.78488 -11.31173,8.4838 -24.2763,9.88448 -37.06395,13.0814 -4.00205,1.00051 -10.12058,0 -14.17151,0 -16.5709,0 -28.01349,-1.72421 -30.52326,-21.80233 -1.39553,-11.16428 -1.75785,-28.7654 6.5407,-37.06395 2.31006,-2.31006 15.37703,-9.81105 17.44186,-9.81105 0.72674,0 0,1.45349 0,2.18024 M 8.7208997,691.53366 c 2.1602653,7.29453 4.7377483,9.09821 8.7209293,13.0814 1.684353,1.68435 1.981662,4.16189 3.270349,5.45058 2.208978,2.20897 6.74082,3.47047 8.720931,5.45058 1.278806,1.27881 9.007526,0.2866 10.901162,2.18023 2.906977,2.90698 14.534884,-2.90697 17.441861,0 2.859952,2.85995 26.084066,0.0787 28.343023,-2.18023 0.691474,-0.69147 3.452847,0.45381 4.360465,0 4.163663,-2.08183 11.5143,-3.88348 14.17151,-6.5407 0.51389,-0.51388 1.53022,0.32501 2.18024,0 4.12737,-2.06368 14.17151,-3.48543 14.17151,-7.63081"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5.00000048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path2" />
</g>
</g>
<rect style="fill:none;fill-opacity:1;stroke:#00ff00;stroke-width:7.08661413;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="703.12494" height="439.68747" x="3.5432765" y="-1.9432737" id="borderRect" />
</svg>
<div id="uiDiv">
<button id="zoom">Zoom</button>
</div>