我正在尝试使用鼠标使 SVG 的一部分可拖动和缩放，但失败了。拖动有效，但缩放不起作用。我基本上从这里偷了大部分代码。
var makeDraggable = (function() {
function makeDraggable(svg, element) {
var selected = false;
var transform, offset;
var container = svg.parentElement;
// Make sure the first transform on the element is a translate transform
var transforms = element.transform.baseVal;
if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
// Create a transform that translates by (0, 0)
var translate = svg.createSVGTransform();
translate.setTranslate(0, 0);
element.transform.baseVal.insertItemBefore(translate, 0);
}
svg.addEventListener('mousedown', startDrag);
svg.addEventListener('mousemove', drag);
svg.addEventListener('mouseup', endDrag);
svg.addEventListener('wheel', zoom); // Attach zoom function to mouse scroll event
function getMousePosition(evt) {
var CTM = svg.getScreenCTM();
if (evt.touches) { evt = evt.touches[0]; }
return {
x: (evt.clientX - CTM.e) / CTM.a,
y: (evt.clientY - CTM.f) / CTM.d
};
}
function startDrag(evt) {
selected = element;
transform = transforms.getItem(0);
// Get initial translation
offset = getMousePosition(evt);
offset.x -= transform.matrix.e;
offset.y -= transform.matrix.f;
}
function drag(evt) {
if (selected) {
evt.preventDefault();
var coord = getMousePosition(evt);
transform.setTranslate(coord.x - offset.x, coord.y - offset.y);
}
}
function endDrag(evt) {
selected = false;
}
function zoom(evt) {
evt.preventDefault();
// Get the current scale
var transform = transforms.getItem(0);
var scale = transform.matrix.a;
// Calculate the new scale based on mouse wheel direction
var scaleStep = evt.deltaY > 0 ? 0.8 : 1.25;
var newScale = scale * scaleStep;
// Limit the scale to a minimum of 0.1 and a maximum of 10
newScale = Math.max(0.1, Math.min(newScale, 10));
// Apply the new scale to the element
transform.setScale(newScale, newScale);
// Adjust the translation to keep the same point under the mouse
var mousePosition = getMousePosition(evt);
var scaleFactor = newScale / scale;
var deltaX = mousePosition.x * (1 - scaleFactor);
var deltaY = mousePosition.y * (1 - scaleFactor);
// Update the translation
transform.setTranslate(transform.matrix.e + deltaX, transform.matrix.f + deltaY);
}
}
return makeDraggable;
})();
onwheel事件只能添加到document.body或window，但不能直接添加到SVG。
<!DOCTYPE html><head></head><body>
<script>
var Z=1;
window.onwheel=function(e){if(e.deltaY>0){Z-=0.1;} else if(e.deltaY<0){Z+=0.1;} svg1.style.zoom=Z;};
</script>
<br>
<svg xmlns="http://www.w3.org/2000/svg" id="svg1" style="width:100px; height:100px;"><path d="M1 7.5h30V1.9H1v5.6zm0 22.6h30v-5.6H1v5.6zm0-11.3h30v-5.6H1v5.6z"/></svg>
<br>This text and the image below should remain the same size...<br><br>
<img id="svg2" src="file:///C:/Users/HP_Desktop/Desktop/svgtest.svg" height="100" width="100" border="0">
</body></html>
备注：在 Chromium 中测试正常。
当您将其 ID 设置为缩放时，该测试适用于内联和图像标签 SVG。