我在放大时尝试裁剪SVG。我的缩放功能正常工作（在我的实际应用中，它位于touchstart而不是click，并缩放到用户点击的地方）。我的SVG由路径，链接图像和矩形边框组成。我想SVG缩放，但不是边框，以便边框裁剪缩放的SVG路径和图像。
这是一个简化代码的JSFiddle。
这是我的脚本（再次，稍微简化）：
function init() {
var zoomed = false;
var newMatrix;
var paths = $("path");
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);
$(".zoomed").hide();
$("#zoom").click(function() {
zoom();
});
function zoom() {
if (zoomed == false) {
for (var i = 0; i < origMatrix.length; i++) {
origMatrix[i] *= 1.9;
}
newMatrix = "matrix(" + origMatrix.join(' ') + ")";
$("#svgGroup").attr("transform", newMatrix);
zoomed = true;
$(".default").hide();
$(".zoomed").show();
} else if (zoomed == true) {
origMatrix = initialValue.slice(0);
$("#svgGroup").attr("transform", "matrix(" + origMatrix + ")");
zoomed = false;
$(".default").show();
$(".zoomed").hide();
}
}
}
这是我的CSS：
#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;
}
这可以通过CSS或添加SVG过滤器来实现吗？
更新
这是我的SVG和HTML代码：
<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>
答案 0 :(得分：1)
function init() {
var zoomed = false;
var newMatrix;
var paths = $("path");
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);
$(".zoomed").hide();
$("#zoom").click(function() {
zoom();
});
function zoom() {
if (zoomed == false) {
for (var i = 0; i < origMatrix.length; i++) {
origMatrix[i] *= 1.9;
}
newMatrix = "matrix(" + origMatrix.join(' ') + ")";
$("#svgGroup").attr("transform", newMatrix);
zoomed = true;
$(".default").hide();
$(".zoomed").show();
} else if (zoomed == true) {
origMatrix = initialValue.slice(0);
$("#svgGroup").attr("transform", "matrix(" + origMatrix + ")");
zoomed = false;
$(".default").show();
$(".zoomed").hide();
}
}
}#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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg onload="init()" width="198.4375mm" height="124.08958mm" viewBox="0 0 703.125 439.6875" id="mySVG" version="1.1">
<defs id="defs1">
<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" />
<clipPath id="clip">
<use xlink:href="#borderRect"/>
</clipPath>
</defs>
<use xlink:href="#borderRect"/>
<g clip-path="url(#clip)">
<use xlink:href="#svgGroup"/>
</g>
</svg>
<div id="uiDiv">
<button id="zoom">Zoom</button>
<br>
</div>
您需要使用clipPath来剪切svg矩形内的图像。
<clipPath id="clip">
<use xlink:href="#borderRect"/>
</clipPath>
并在clipPath元素
#svgGroup
<g clip-path="url(#clip)">
<use xlink:href="#svgGroup"/>
</g>
这是工作Demo