Skip to content

@teheran /index.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A CodePen by teheran. jQuery Draggable with out jQuery UI - It doesn't have all the fancy callbacks and options, but hey, it makes things draggable. From: http://reader-download.googlecode.com/svn/trunk/jquery-draggable/index.html
<div>
<svg id="svgRoot"
xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%"
viewBox="0 0 300 300">
<symbol id='symbol'>
<image width="100" height="100"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/c/cb/Footnote.svg"/>
</symbol>
<g id="svgElement">
<use transform='translate(000,000)' xlink:href="#symbol"/>
<use transform='translate(100,000)' xlink:href="#symbol"/>
<use transform='translate(200,000)' xlink:href="#symbol"/>
<use transform='translate(000,100)' xlink:href="#symbol"/>
<use transform='translate(100,100)' xlink:href="#symbol"/>
<use transform='translate(200,100)' xlink:href="#symbol"/>
<use transform='translate(000,200)' xlink:href="#symbol"/>
<use transform='translate(100,200)' xlink:href="#symbol"/>
<use transform='translate(200,200)' xlink:href="#symbol"/>
</g>
</svg>
</div>
var svgRoot = document.getElementById('svgRoot');
function zoomSvgElement(element, center, scale) {
var matrix = element.getTransformToElement(svgRoot)
.translate(center.x, center.y)
.scale(scale)
.translate(-center.x, -center.y);
element.setAttribute("transform", "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")");
}
function createSVGMatrix() {
return svgRoot.createSVGMatrix()
}
function createSVGPoint(clientX, clientY) {
var result = svgRoot.createSVGPoint();
result.x = clientX;
result.y = clientY;
return result;
}
function convertClientXY(element, clientX, clientY) {
return createSVGPoint(clientX, clientY)
.matrixTransform(element.getScreenCTM().inverse());
}
var commonRatio = 1.1; // знаменатель zoom-прогрессии
function translateMouseWheelClicksToScale(clicks) {
return Math.pow(commonRatio, clicks);
}
var accumulator = 0; // накопитель щелчков колесика мышки
$('#svgElement').mousewheel(function(event, delta, deltaX, deltaY) {
zoomSvgElement(
this,
convertClientXY(this, event.pageX, event.pageY),
translateMouseWheelClicksToScale(/*accumulator += */Math.round(delta)));
if (event.preventDefault) {
event.preventDefault();
} else {
return false;
}
});
$('div').mousemove(function(e) {
$('#statusDiv').html( e.pageX +', '+ e.pageY );
});
svg {
cursor:"" all-scroll;
}
svg {
display: block;
margin: auto;
background: gray;
cursor: all-scroll;
}
div {
border:1px solid red;
margin: 3%;
padding: 3%
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.