How to set an element with relative positioning in absolute dimensions in SVG?
Recently began to use SVG in my personal projects. I've learned that SVG is not (just) an image but also a document. I'm willing to know how to set an element with relative positioning in absolute dimensions in SVG?
For a better understanding in case I didn't make the question clear enough, I've drawn a diagram to make it easier to get the picture:
As in this image, I have a square in 100x100 px dimension. When the user changes his/her reading device, I hope the pink square can keep the size and the positioning.
I've read about the article 'How to Scale SVG' by AMELIA BELLAMY-ROYDS on CSS Tricks, got the idea but didn't really find out the way doing it.
I've found <rect> tag in SVG file, but have no idea how to make the pink square can be maintained how big it is when the scale of parent container changes.
Any suggestion, or article, will be appreciated in advance.
css svg
edited Nov 11 '18 at 9:40
enxaneta
7,0842516
asked Nov 11 '18 at 5:57
HeNRy Hu HeNRy Hu
11
add a comment |
Recently began to use SVG in my personal projects. I've learned that SVG is not (just) an image but also a document. I'm willing to know how to set an element with relative positioning in absolute dimensions in SVG?
For a better understanding in case I didn't make the question clear enough, I've drawn a diagram to make it easier to get the picture:
As in this image, I have a square in 100x100 px dimension. When the user changes his/her reading device, I hope the pink square can keep the size and the positioning.
I've read about the article 'How to Scale SVG' by AMELIA BELLAMY-ROYDS on CSS Tricks, got the idea but didn't really find out the way doing it.
I've found <rect> tag in SVG file, but have no idea how to make the pink square can be maintained how big it is when the scale of parent container changes.
Any suggestion, or article, will be appreciated in advance.
css svg
edited Nov 11 '18 at 9:40
enxaneta
7,0842516
asked Nov 11 '18 at 5:57
HeNRy Hu HeNRy Hu
11
add a comment |
Recently began to use SVG in my personal projects. I've learned that SVG is not (just) an image but also a document. I'm willing to know how to set an element with relative positioning in absolute dimensions in SVG?
For a better understanding in case I didn't make the question clear enough, I've drawn a diagram to make it easier to get the picture:
As in this image, I have a square in 100x100 px dimension. When the user changes his/her reading device, I hope the pink square can keep the size and the positioning.
I've read about the article 'How to Scale SVG' by AMELIA BELLAMY-ROYDS on CSS Tricks, got the idea but didn't really find out the way doing it.
I've found <rect> tag in SVG file, but have no idea how to make the pink square can be maintained how big it is when the scale of parent container changes.
Any suggestion, or article, will be appreciated in advance.
css svg
edited Nov 11 '18 at 9:40
enxaneta
7,0842516
asked Nov 11 '18 at 5:57
HeNRy Hu HeNRy Hu
11
Recently began to use SVG in my personal projects. I've learned that SVG is not (just) an image but also a document. I'm willing to know how to set an element with relative positioning in absolute dimensions in SVG?
For a better understanding in case I didn't make the question clear enough, I've drawn a diagram to make it easier to get the picture:
As in this image, I have a square in 100x100 px dimension. When the user changes his/her reading device, I hope the pink square can keep the size and the positioning.
I've read about the article 'How to Scale SVG' by AMELIA BELLAMY-ROYDS on CSS Tricks, got the idea but didn't really find out the way doing it.
I've found <rect> tag in SVG file, but have no idea how to make the pink square can be maintained how big it is when the scale of parent container changes.
Any suggestion, or article, will be appreciated in advance.
css svg
css svg
edited Nov 11 '18 at 9:40
enxaneta
7,0842516
asked Nov 11 '18 at 5:57
HeNRy Hu HeNRy Hu
11
edited Nov 11 '18 at 9:40
enxaneta
7,0842516
asked Nov 11 '18 at 5:57
HeNRy Hu HeNRy Hu
11
edited Nov 11 '18 at 9:40
enxaneta
7,0842516
edited Nov 11 '18 at 9:40
enxaneta
7,0842516
edited Nov 11 '18 at 9:40
enxaneta
7,0842516
7,0842516
asked Nov 11 '18 at 5:57
HeNRy Hu HeNRy Hu
11
asked Nov 11 '18 at 5:57
HeNRy Hu HeNRy Hu
11
asked Nov 11 '18 at 5:57
HeNRy Hu HeNRy Hu
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The easiest solution would be not resizing the SVG. You give your SVG a width and a height in pixels (or whatever) and you make your SVG not responsive.
If this doesn't work for you, if you need to resize the whole svg element but not the pink rectangle, next comes an example where I resize the SVG canvas but the <rect> is apparently not resized.
function init()
let p =
x : 1000 * .05,// 5% of the svg width
y : 500 * .05 // 5% of the svg height
p = getCoords(p);
let size =
x:100,
y:100
size = getCoords(size);
// resize the rect
theRect.setAttributeNS(null,"x",p.x);
theRect.setAttributeNS(null,"y",p.y);
theRect.setAttributeNS(null,"width",size.x);
theRect.setAttributeNS(null,"height",size.y);
function getCoords(o)
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
setTimeout(function()
init();
addEventListener('resize', init, false);
, 15);svgborder:1px solid<svg id="svg" viewBox="0 0 1000 500">
<circle fill="gold" cx="500" cy="250" r="200" />
<rect id="theRect" fill="hotpink" x="5%" y="5%" width="100px" height="100px" />
</svg>answered Nov 11 '18 at 11:52
enxanetaenxaneta
7,0842516
add a comment |
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%2f53246241%2fhow-to-set-an-element-with-relative-positioning-in-absolute-dimensions-in-svg%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
The easiest solution would be not resizing the SVG. You give your SVG a width and a height in pixels (or whatever) and you make your SVG not responsive.
If this doesn't work for you, if you need to resize the whole svg element but not the pink rectangle, next comes an example where I resize the SVG canvas but the <rect> is apparently not resized.
function init()
let p =
x : 1000 * .05,// 5% of the svg width
y : 500 * .05 // 5% of the svg height
p = getCoords(p);
let size =
x:100,
y:100
size = getCoords(size);
// resize the rect
theRect.setAttributeNS(null,"x",p.x);
theRect.setAttributeNS(null,"y",p.y);
theRect.setAttributeNS(null,"width",size.x);
theRect.setAttributeNS(null,"height",size.y);
function getCoords(o)
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
setTimeout(function()
init();
addEventListener('resize', init, false);
, 15);svgborder:1px solid<svg id="svg" viewBox="0 0 1000 500">
<circle fill="gold" cx="500" cy="250" r="200" />
<rect id="theRect" fill="hotpink" x="5%" y="5%" width="100px" height="100px" />
</svg>answered Nov 11 '18 at 11:52
enxanetaenxaneta
7,0842516
add a comment |
The easiest solution would be not resizing the SVG. You give your SVG a width and a height in pixels (or whatever) and you make your SVG not responsive.
If this doesn't work for you, if you need to resize the whole svg element but not the pink rectangle, next comes an example where I resize the SVG canvas but the <rect> is apparently not resized.
function init()
let p =
x : 1000 * .05,// 5% of the svg width
y : 500 * .05 // 5% of the svg height
p = getCoords(p);
let size =
x:100,
y:100
size = getCoords(size);
// resize the rect
theRect.setAttributeNS(null,"x",p.x);
theRect.setAttributeNS(null,"y",p.y);
theRect.setAttributeNS(null,"width",size.x);
theRect.setAttributeNS(null,"height",size.y);
function getCoords(o)
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
setTimeout(function()
init();
addEventListener('resize', init, false);
, 15);svgborder:1px solid<svg id="svg" viewBox="0 0 1000 500">
<circle fill="gold" cx="500" cy="250" r="200" />
<rect id="theRect" fill="hotpink" x="5%" y="5%" width="100px" height="100px" />
</svg>answered Nov 11 '18 at 11:52
enxanetaenxaneta
7,0842516
add a comment |
The easiest solution would be not resizing the SVG. You give your SVG a width and a height in pixels (or whatever) and you make your SVG not responsive.
If this doesn't work for you, if you need to resize the whole svg element but not the pink rectangle, next comes an example where I resize the SVG canvas but the <rect> is apparently not resized.
function init()
let p =
x : 1000 * .05,// 5% of the svg width
y : 500 * .05 // 5% of the svg height
p = getCoords(p);
let size =
x:100,
y:100
size = getCoords(size);
// resize the rect
theRect.setAttributeNS(null,"x",p.x);
theRect.setAttributeNS(null,"y",p.y);
theRect.setAttributeNS(null,"width",size.x);
theRect.setAttributeNS(null,"height",size.y);
function getCoords(o)
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
setTimeout(function()
init();
addEventListener('resize', init, false);
, 15);svgborder:1px solid<svg id="svg" viewBox="0 0 1000 500">
<circle fill="gold" cx="500" cy="250" r="200" />
<rect id="theRect" fill="hotpink" x="5%" y="5%" width="100px" height="100px" />
</svg>answered Nov 11 '18 at 11:52
enxanetaenxaneta
7,0842516
The easiest solution would be not resizing the SVG. You give your SVG a width and a height in pixels (or whatever) and you make your SVG not responsive.
If this doesn't work for you, if you need to resize the whole svg element but not the pink rectangle, next comes an example where I resize the SVG canvas but the <rect> is apparently not resized.
function init()
let p =
x : 1000 * .05,// 5% of the svg width
y : 500 * .05 // 5% of the svg height
p = getCoords(p);
let size =
x:100,
y:100
size = getCoords(size);
// resize the rect
theRect.setAttributeNS(null,"x",p.x);
theRect.setAttributeNS(null,"y",p.y);
theRect.setAttributeNS(null,"width",size.x);
theRect.setAttributeNS(null,"height",size.y);
function getCoords(o)
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
setTimeout(function()
init();
addEventListener('resize', init, false);
, 15);svgborder:1px solid<svg id="svg" viewBox="0 0 1000 500">
<circle fill="gold" cx="500" cy="250" r="200" />
<rect id="theRect" fill="hotpink" x="5%" y="5%" width="100px" height="100px" />
</svg>function init()
let p =
x : 1000 * .05,// 5% of the svg width
y : 500 * .05 // 5% of the svg height
p = getCoords(p);
let size =
x:100,
y:100
size = getCoords(size);
// resize the rect
theRect.setAttributeNS(null,"x",p.x);
theRect.setAttributeNS(null,"y",p.y);
theRect.setAttributeNS(null,"width",size.x);
theRect.setAttributeNS(null,"height",size.y);
function getCoords(o)
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
setTimeout(function()
init();
addEventListener('resize', init, false);
, 15);svgborder:1px solid<svg id="svg" viewBox="0 0 1000 500">
<circle fill="gold" cx="500" cy="250" r="200" />
<rect id="theRect" fill="hotpink" x="5%" y="5%" width="100px" height="100px" />
</svg>function init()
let p =
x : 1000 * .05,// 5% of the svg width
y : 500 * .05 // 5% of the svg height
p = getCoords(p);
let size =
x:100,
y:100
size = getCoords(size);
// resize the rect
theRect.setAttributeNS(null,"x",p.x);
theRect.setAttributeNS(null,"y",p.y);
theRect.setAttributeNS(null,"width",size.x);
theRect.setAttributeNS(null,"height",size.y);
function getCoords(o)
var p = svg.createSVGPoint();
p.x= o.x;
p.y= o.y;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p
setTimeout(function()
init();
addEventListener('resize', init, false);
, 15);svgborder:1px solid<svg id="svg" viewBox="0 0 1000 500">
<circle fill="gold" cx="500" cy="250" r="200" />
<rect id="theRect" fill="hotpink" x="5%" y="5%" width="100px" height="100px" />
</svg>answered Nov 11 '18 at 11:52
enxanetaenxaneta
7,0842516
answered Nov 11 '18 at 11:52
enxanetaenxaneta
7,0842516
answered Nov 11 '18 at 11:52
enxanetaenxaneta
7,0842516
answered Nov 11 '18 at 11:52
enxanetaenxaneta
7,0842516
7,0842516
add a comment |
add a comment |
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%2f53246241%2fhow-to-set-an-element-with-relative-positioning-in-absolute-dimensions-in-svg%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
