Mixing
Centering drawing to point in specific viewbox
I'm using ariutta svg-pan-zoom script. The options fit and center are set to true. Have a viewbox defintion in my SVG like this one:
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
svg width and height are set to screen dimension.
which is in fact a geographic coordinates boundary. Need to center to specific poinit in geographic coordinate like: 27.81 -43.221 and then zoom at level 4.
As far as I understend i must provide pixel coordinate to pan function. How can i calculate them in my case?
Below is a full svg source
<svg id="svg" width="1174" height="735" viewBox="27.7333333 -43.2233334 0.2183334 0.0566667">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>
<script>
var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})
</script>
I want to center and zoom to circle area with ID: "marker", giving the proper value to zoom and panBy methods.
update - I create a code snippet to illustrate my issue
var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg
id="svg" class="mapNavSVG"
width="400" height="300"
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
ev="http://www.w3.org/2001/xml-events"
shape-rendering="geometricPrecision"
>
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>svgpanzoom
asked Nov 21 '18 at 12:16
xentiaxentia
1431414
add a comment |
I'm using ariutta svg-pan-zoom script. The options fit and center are set to true. Have a viewbox defintion in my SVG like this one:
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
svg width and height are set to screen dimension.
which is in fact a geographic coordinates boundary. Need to center to specific poinit in geographic coordinate like: 27.81 -43.221 and then zoom at level 4.
As far as I understend i must provide pixel coordinate to pan function. How can i calculate them in my case?
Below is a full svg source
<svg id="svg" width="1174" height="735" viewBox="27.7333333 -43.2233334 0.2183334 0.0566667">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>
<script>
var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})
</script>
I want to center and zoom to circle area with ID: "marker", giving the proper value to zoom and panBy methods.
update - I create a code snippet to illustrate my issue
var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg
id="svg" class="mapNavSVG"
width="400" height="300"
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
ev="http://www.w3.org/2001/xml-events"
shape-rendering="geometricPrecision"
>
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>svgpanzoom
asked Nov 21 '18 at 12:16
xentiaxentia
1431414
add a comment |
I'm using ariutta svg-pan-zoom script. The options fit and center are set to true. Have a viewbox defintion in my SVG like this one:
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
svg width and height are set to screen dimension.
which is in fact a geographic coordinates boundary. Need to center to specific poinit in geographic coordinate like: 27.81 -43.221 and then zoom at level 4.
As far as I understend i must provide pixel coordinate to pan function. How can i calculate them in my case?
Below is a full svg source
<svg id="svg" width="1174" height="735" viewBox="27.7333333 -43.2233334 0.2183334 0.0566667">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>
<script>
var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})
</script>
I want to center and zoom to circle area with ID: "marker", giving the proper value to zoom and panBy methods.
update - I create a code snippet to illustrate my issue
var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg
id="svg" class="mapNavSVG"
width="400" height="300"
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
ev="http://www.w3.org/2001/xml-events"
shape-rendering="geometricPrecision"
>
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>svgpanzoom
asked Nov 21 '18 at 12:16
xentiaxentia
1431414
I'm using ariutta svg-pan-zoom script. The options fit and center are set to true. Have a viewbox defintion in my SVG like this one:
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
svg width and height are set to screen dimension.
which is in fact a geographic coordinates boundary. Need to center to specific poinit in geographic coordinate like: 27.81 -43.221 and then zoom at level 4.
As far as I understend i must provide pixel coordinate to pan function. How can i calculate them in my case?
Below is a full svg source
<svg id="svg" width="1174" height="735" viewBox="27.7333333 -43.2233334 0.2183334 0.0566667">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>
<script>
var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})
</script>
I want to center and zoom to circle area with ID: "marker", giving the proper value to zoom and panBy methods.
update - I create a code snippet to illustrate my issue
var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg
id="svg" class="mapNavSVG"
width="400" height="300"
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
ev="http://www.w3.org/2001/xml-events"
shape-rendering="geometricPrecision"
>
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg
id="svg" class="mapNavSVG"
width="400" height="300"
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
ev="http://www.w3.org/2001/xml-events"
shape-rendering="geometricPrecision"
>
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>var PTZ = svgPanZoom('#svg', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
contain:true,
minZoom:1,
maxZoom: 300,
viewportSelector: '.svg-pan-zoom_viewport'
});
PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg
id="svg" class="mapNavSVG"
width="400" height="300"
viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
ev="http://www.w3.org/2001/xml-events"
shape-rendering="geometricPrecision"
>
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>svgpanzoom
svgpanzoom
asked Nov 21 '18 at 12:16
xentiaxentia
1431414
asked Nov 21 '18 at 12:16
xentiaxentia
1431414
edited Nov 22 '18 at 10:25
xentia
asked Nov 21 '18 at 12:16
xentiaxentia
1431414
asked Nov 21 '18 at 12:16
xentiaxentia
1431414
asked Nov 21 '18 at 12:16
xentiaxentia
1431414
1431414
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
So viewBox is just a rectangle (x,y,width, height) that you want to place over your overall svg scene. So if you just need to center and zoom into the circle without any javascript (in non-programmatic manner) then you would want to:
define bounding box size for your circle (since it has r = 0.001 the bounding box's dimensions is easy to find: width: 0.002, height: 0.002)
define coordinate of top left corner of that bounding box. For that you need to take your circle's center coordinate that you have and substract radius (which is half of the bounding box for circle):
cx="27.9426815914392" cy="-43.1805954054158"
bounding box x then: 27.9426815914392 - 0.01 = 27.9416815914392;
bounding box y then: -43.1805954054158 - 0.01 = -43.1815954054158;
So now your total viewBox can be constructed as:
viewBox="27.9416815914392 -43.1815954054158 0.002 0.002"
If you need a programmatic solution, that can be event easier, you just need to leverage bounding box API that exists in SVG spec:
function init() {
var mainSVG = document.getElementById('svg');
var circle = document.getElementById('marker');
var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
mainSVG.setAttribute('viewBox', boundingBox)
}<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>I don't know exact positioning that you want to achieve but I hope this answer helps you with the direction
answered Nov 21 '18 at 16:03
Sergey RudenkoSergey Rudenko
2,7072822
Thank you Sergey, I'll try your solution ASAP but... changing viewbox parameters will lead to incorrect svg zoom pan library response?
– xentia
Nov 21 '18 at 19:03
hmm interesting, can you try to implement what I suggested and then share here what errors you see?
– Sergey Rudenko
Nov 21 '18 at 22:00
as I expected - when the function init() is called, the whole svg graph just disappears. Probably due to the fact that svg pan zoom plugin has previously set its own transformations and then probably becomes a complete confusion. I must clarify that i call svg pan-zoom with options fit: true and center: true,
– xentia
Nov 22 '18 at 5:35
please review update source code in my question - i've added a script which initialize that plugin.
– xentia
Nov 22 '18 at 5:44
Cool let me check this
– Sergey Rudenko
Nov 22 '18 at 8:16
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411848%2fcentering-drawing-to-point-in-specific-viewbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
So viewBox is just a rectangle (x,y,width, height) that you want to place over your overall svg scene. So if you just need to center and zoom into the circle without any javascript (in non-programmatic manner) then you would want to:
define bounding box size for your circle (since it has r = 0.001 the bounding box's dimensions is easy to find: width: 0.002, height: 0.002)
define coordinate of top left corner of that bounding box. For that you need to take your circle's center coordinate that you have and substract radius (which is half of the bounding box for circle):
cx="27.9426815914392" cy="-43.1805954054158"
bounding box x then: 27.9426815914392 - 0.01 = 27.9416815914392;
bounding box y then: -43.1805954054158 - 0.01 = -43.1815954054158;
So now your total viewBox can be constructed as:
viewBox="27.9416815914392 -43.1815954054158 0.002 0.002"
If you need a programmatic solution, that can be event easier, you just need to leverage bounding box API that exists in SVG spec:
function init() {
var mainSVG = document.getElementById('svg');
var circle = document.getElementById('marker');
var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
mainSVG.setAttribute('viewBox', boundingBox)
}<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>I don't know exact positioning that you want to achieve but I hope this answer helps you with the direction
answered Nov 21 '18 at 16:03
Sergey RudenkoSergey Rudenko
2,7072822
Thank you Sergey, I'll try your solution ASAP but... changing viewbox parameters will lead to incorrect svg zoom pan library response?
– xentia
Nov 21 '18 at 19:03
hmm interesting, can you try to implement what I suggested and then share here what errors you see?
– Sergey Rudenko
Nov 21 '18 at 22:00
as I expected - when the function init() is called, the whole svg graph just disappears. Probably due to the fact that svg pan zoom plugin has previously set its own transformations and then probably becomes a complete confusion. I must clarify that i call svg pan-zoom with options fit: true and center: true,
– xentia
Nov 22 '18 at 5:35
please review update source code in my question - i've added a script which initialize that plugin.
– xentia
Nov 22 '18 at 5:44
Cool let me check this
– Sergey Rudenko
Nov 22 '18 at 8:16
|
show 2 more comments
So viewBox is just a rectangle (x,y,width, height) that you want to place over your overall svg scene. So if you just need to center and zoom into the circle without any javascript (in non-programmatic manner) then you would want to:
define bounding box size for your circle (since it has r = 0.001 the bounding box's dimensions is easy to find: width: 0.002, height: 0.002)
define coordinate of top left corner of that bounding box. For that you need to take your circle's center coordinate that you have and substract radius (which is half of the bounding box for circle):
cx="27.9426815914392" cy="-43.1805954054158"
bounding box x then: 27.9426815914392 - 0.01 = 27.9416815914392;
bounding box y then: -43.1805954054158 - 0.01 = -43.1815954054158;
So now your total viewBox can be constructed as:
viewBox="27.9416815914392 -43.1815954054158 0.002 0.002"
If you need a programmatic solution, that can be event easier, you just need to leverage bounding box API that exists in SVG spec:
function init() {
var mainSVG = document.getElementById('svg');
var circle = document.getElementById('marker');
var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
mainSVG.setAttribute('viewBox', boundingBox)
}<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>I don't know exact positioning that you want to achieve but I hope this answer helps you with the direction
answered Nov 21 '18 at 16:03
Sergey RudenkoSergey Rudenko
2,7072822
Thank you Sergey, I'll try your solution ASAP but... changing viewbox parameters will lead to incorrect svg zoom pan library response?
– xentia
Nov 21 '18 at 19:03
hmm interesting, can you try to implement what I suggested and then share here what errors you see?
– Sergey Rudenko
Nov 21 '18 at 22:00
as I expected - when the function init() is called, the whole svg graph just disappears. Probably due to the fact that svg pan zoom plugin has previously set its own transformations and then probably becomes a complete confusion. I must clarify that i call svg pan-zoom with options fit: true and center: true,
– xentia
Nov 22 '18 at 5:35
please review update source code in my question - i've added a script which initialize that plugin.
– xentia
Nov 22 '18 at 5:44
Cool let me check this
– Sergey Rudenko
Nov 22 '18 at 8:16
|
show 2 more comments
So viewBox is just a rectangle (x,y,width, height) that you want to place over your overall svg scene. So if you just need to center and zoom into the circle without any javascript (in non-programmatic manner) then you would want to:
define bounding box size for your circle (since it has r = 0.001 the bounding box's dimensions is easy to find: width: 0.002, height: 0.002)
define coordinate of top left corner of that bounding box. For that you need to take your circle's center coordinate that you have and substract radius (which is half of the bounding box for circle):
cx="27.9426815914392" cy="-43.1805954054158"
bounding box x then: 27.9426815914392 - 0.01 = 27.9416815914392;
bounding box y then: -43.1805954054158 - 0.01 = -43.1815954054158;
So now your total viewBox can be constructed as:
viewBox="27.9416815914392 -43.1815954054158 0.002 0.002"
If you need a programmatic solution, that can be event easier, you just need to leverage bounding box API that exists in SVG spec:
function init() {
var mainSVG = document.getElementById('svg');
var circle = document.getElementById('marker');
var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
mainSVG.setAttribute('viewBox', boundingBox)
}<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>I don't know exact positioning that you want to achieve but I hope this answer helps you with the direction
answered Nov 21 '18 at 16:03
Sergey RudenkoSergey Rudenko
2,7072822
So viewBox is just a rectangle (x,y,width, height) that you want to place over your overall svg scene. So if you just need to center and zoom into the circle without any javascript (in non-programmatic manner) then you would want to:
define bounding box size for your circle (since it has r = 0.001 the bounding box's dimensions is easy to find: width: 0.002, height: 0.002)
define coordinate of top left corner of that bounding box. For that you need to take your circle's center coordinate that you have and substract radius (which is half of the bounding box for circle):
cx="27.9426815914392" cy="-43.1805954054158"
bounding box x then: 27.9426815914392 - 0.01 = 27.9416815914392;
bounding box y then: -43.1805954054158 - 0.01 = -43.1815954054158;
So now your total viewBox can be constructed as:
viewBox="27.9416815914392 -43.1815954054158 0.002 0.002"
If you need a programmatic solution, that can be event easier, you just need to leverage bounding box API that exists in SVG spec:
function init() {
var mainSVG = document.getElementById('svg');
var circle = document.getElementById('marker');
var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
mainSVG.setAttribute('viewBox', boundingBox)
}<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>I don't know exact positioning that you want to achieve but I hope this answer helps you with the direction
function init() {
var mainSVG = document.getElementById('svg');
var circle = document.getElementById('marker');
var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
mainSVG.setAttribute('viewBox', boundingBox)
}<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>function init() {
var mainSVG = document.getElementById('svg');
var circle = document.getElementById('marker');
var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
mainSVG.setAttribute('viewBox', boundingBox)
}<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>answered Nov 21 '18 at 16:03
Sergey RudenkoSergey Rudenko
2,7072822
answered Nov 21 '18 at 16:03
Sergey RudenkoSergey Rudenko
2,7072822
answered Nov 21 '18 at 16:03
Sergey RudenkoSergey Rudenko
2,7072822
answered Nov 21 '18 at 16:03
Sergey RudenkoSergey Rudenko
2,7072822
2,7072822
Thank you Sergey, I'll try your solution ASAP but... changing viewbox parameters will lead to incorrect svg zoom pan library response?
– xentia
Nov 21 '18 at 19:03
hmm interesting, can you try to implement what I suggested and then share here what errors you see?
– Sergey Rudenko
Nov 21 '18 at 22:00
as I expected - when the function init() is called, the whole svg graph just disappears. Probably due to the fact that svg pan zoom plugin has previously set its own transformations and then probably becomes a complete confusion. I must clarify that i call svg pan-zoom with options fit: true and center: true,
– xentia
Nov 22 '18 at 5:35
please review update source code in my question - i've added a script which initialize that plugin.
– xentia
Nov 22 '18 at 5:44
Cool let me check this
– Sergey Rudenko
Nov 22 '18 at 8:16
|
show 2 more comments
Thank you Sergey, I'll try your solution ASAP but... changing viewbox parameters will lead to incorrect svg zoom pan library response?
– xentia
Nov 21 '18 at 19:03
hmm interesting, can you try to implement what I suggested and then share here what errors you see?
– Sergey Rudenko
Nov 21 '18 at 22:00
as I expected - when the function init() is called, the whole svg graph just disappears. Probably due to the fact that svg pan zoom plugin has previously set its own transformations and then probably becomes a complete confusion. I must clarify that i call svg pan-zoom with options fit: true and center: true,
– xentia
Nov 22 '18 at 5:35
please review update source code in my question - i've added a script which initialize that plugin.
– xentia
Nov 22 '18 at 5:44
Cool let me check this
– Sergey Rudenko
Nov 22 '18 at 8:16
Thank you Sergey, I'll try your solution ASAP but... changing viewbox parameters will lead to incorrect svg zoom pan library response?
– xentia
Nov 21 '18 at 19:03
Thank you Sergey, I'll try your solution ASAP but... changing viewbox parameters will lead to incorrect svg zoom pan library response?
– xentia
Nov 21 '18 at 19:03
hmm interesting, can you try to implement what I suggested and then share here what errors you see?
– Sergey Rudenko
Nov 21 '18 at 22:00
hmm interesting, can you try to implement what I suggested and then share here what errors you see?
– Sergey Rudenko
Nov 21 '18 at 22:00
as I expected - when the function init() is called, the whole svg graph just disappears. Probably due to the fact that svg pan zoom plugin has previously set its own transformations and then probably becomes a complete confusion. I must clarify that i call svg pan-zoom with options fit: true and center: true,
– xentia
Nov 22 '18 at 5:35
as I expected - when the function init() is called, the whole svg graph just disappears. Probably due to the fact that svg pan zoom plugin has previously set its own transformations and then probably becomes a complete confusion. I must clarify that i call svg pan-zoom with options fit: true and center: true,
– xentia
Nov 22 '18 at 5:35
please review update source code in my question - i've added a script which initialize that plugin.
– xentia
Nov 22 '18 at 5:44
please review update source code in my question - i've added a script which initialize that plugin.
– xentia
Nov 22 '18 at 5:44
Cool let me check this
– Sergey Rudenko
Nov 22 '18 at 8:16
Cool let me check this
– Sergey Rudenko
Nov 22 '18 at 8:16
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411848%2fcentering-drawing-to-point-in-specific-viewbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
