1
У меня есть следующий XML-код для создания изображения SVG с небольшим кругом, который следует за курсором пользователя. Область, которая отслеживает курсор и отображает круг, не совпадает с остальной частью изображения. Я не знаю, почему это так. Мне бы очень хотелось, чтобы кто-то просветил меня (я только начал изучать SVG пару дней назад).Как создать элемент отслеживания курсора SVG?
Если я изменю preserveAspectRatio от xMidYMin до none, тогда у круга будет другой набор проблем. Он не следует за курсором очень далеко вниз, и он идет дальше вправо, чем нужно.
Кроме того, я не очень хорошо разбираюсь в JavaScript, поэтому, если вы видите способы упрощения кода или если вы можете понять, как переключить это на jQuery, я был бы очень признателен этому.
<?xml version="1.0" encoding="utf-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ <!ATTLIST svg xmlns:a3 CDATA #IMPLIED a3:scriptImplementation CDATA #IMPLIED>
<!ATTLIST script a3:scriptImplementation CDATA #IMPLIED> ]>
<svg viewBox="0 0 720 1278" preserveAspectRatio="xMidYMin"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
a3:scriptImplementation="Adobe"
onload="init(evt)"
onzoom="updateTracker(evt)"
onscroll="updateTracker(evt)"
onresize="updateTracker(evt)">
<script type="text/ecmascript" a3:scriptImplementation="Adobe">
<![CDATA[
var elems = {
tracker: false,
cursor: false,
trans: true,
scale: true,
mx: true,
my: true,
ux: true,
uy: true
};
var frame = {
x_trans: 0,
y_trans: 0,
zoom: 1,
x_scale: 1,
y_scale: 1
};
function init(e) {
if (window.svgDocument == null) svgDocument = e.target.ownerDocument;
// Find nodes by id and store in elems object
for (var id in elems) getElement(id, elems[id]);
}
function getElement(id, useFirstChild) {
// Find the node with the specified id
var node = svgDocument.getElementById(id);
if (useFirstChild) {
// Grab first child of node
// This is used to get the text node of tspan and text elements
elems[id] = node.firstChild;
} else {
// Do not need first child so use the node we just found
elems[id] = node;
}
}
function updateTracker(e) {
// Get the top-most SVG element
var SVGRoot = svgDocument.documentElement;
// Get the current zoom and pan settings
var trans = SVGRoot.currentTranslate;
var scale = SVGRoot.currentScale;
// Determine the translation needed to move the upper-left
// corner of our tracking rectangle to the upper-left of the
// current view.
// The zeros are used to reinforce that we are translating
// the origin of the rectangle to the upper-left corner of the
// current view.
frame.x_trans = (0.0 - trans.x)/scale;
frame.y_trans = (0.0 - trans.y)/scale;
// Now that we have moved the rectangles corner to the
// upper-left position, let us scale the rectangle to fit
// the current view. X and Y scales are maintained seperately
// to handle possible anamorphic scaling from the viewBox
frame.zoom = scale;
frame.x_scale = 1/scale;
frame.y_scale = 1/scale;
// Get the current viewBox
var vbox = SVGRoot.getAttributeNS(null, "viewBox");
if (vbox) {
// We have a viewBox so, update our translation and scale
// to take the viewBox into account
// Break the viewBox parameters into an array to make life easier
var params = vbox.split(/\s+/);
// Determine the scaling from the viewBox
// Note that these calculations assume that the outermost
// SVG element has height and width attributes set to 100%.
var h_scale = window.innerWidth/params[2];
var v_scale = window.innerHeight/params[3];
// Update our previously calculated transform
frame.x_trans = frame.x_trans/h_scale + parseFloat(params[0]);
frame.y_trans = frame.y_trans/v_scale + parseFloat(params[0]);
frame.x_scale = frame.x_scale/h_scale;
frame.y_scale = frame.y_scale/v_scale;
}
// Apply changes to the tracking rectangle
updateTrackerTransform();
}
function updateCursor(e) {
// Get the mouse x and y coordinates
var x = e.clientX;
var y = e.clientY;
// Calculate the user-coordinate using the scaling and
// translation values we calculated for the tracking
// rectangle
var nx = x * frame.x_scale + frame.x_trans;
var ny = y * frame.y_scale + frame.y_trans;
// Update the cursor position
elems.cursor.setAttributeNS(null, "cx", nx);
elems.cursor.setAttributeNS(null, "cy", ny);
// Update our text fields
elems.mx.data = x;
elems.my.data = y;
elems.ux.data = nx;
elems.uy.data = ny;
}
function updateTrackerTransform() {
// Build the text versions of the translate and scale transformation
var trans = "translate(" + frame.x_trans + "," + frame.y_trans + ")"
var scale = "scale(" + 1/frame.zoom + "," + 1/frame.zoom + ")";
// Apply the transformation to our tracking rectangle
elems.tracker.setAttributeNS(null, "transform", trans + " " + scale);
// Update our text fields
elems.trans.data = trans;
elems.scale.data = scale; }]]>
</script>
<!-- Create the cursor element -->
<circle id="cursor" cx="100" cy="100" r="10" fill="orange" />
<!-- A group of elements collectively refered to as the tracker -->
<g id="tracker">
<!-- Draw a visible rectangle to show the tracking area -->
<rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.25" />
<!-- - This is the actual tracking rectangle. This is all that is needed - to track the cursor. Just place the "tracker" id here and remove this group - and all of the other elements in this group -->
<rect x="0" y="0" width="100%" height="100%" opacity="0" onmousemove="updateCursor(evt)" />
</g>
</svg>