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 at 9:40
enxaneta
5,2762415
asked Nov 11 at 5:57
HeNRy Hu
1
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 at 9:40
enxaneta
5,2762415
asked Nov 11 at 5:57
HeNRy Hu
1
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 at 9:40
enxaneta
5,2762415
asked Nov 11 at 5:57
HeNRy Hu
1
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 at 9:40
enxaneta
5,2762415
asked Nov 11 at 5:57
HeNRy Hu
1
edited Nov 11 at 9:40
enxaneta
5,2762415
asked Nov 11 at 5:57
HeNRy Hu
1
edited Nov 11 at 9:40
enxaneta
5,2762415
edited Nov 11 at 9:40
enxaneta
5,2762415
edited Nov 11 at 9:40
enxaneta
5,2762415
5,2762415
asked Nov 11 at 5:57
HeNRy Hu
1
asked Nov 11 at 5:57
HeNRy Hu
1
asked Nov 11 at 5:57
HeNRy Hu
1
1
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 at 11:52
enxaneta
5,2762415
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 at 11:52
enxaneta
5,2762415
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 at 11:52
enxaneta
5,2762415
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 at 11:52
enxaneta
5,2762415
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 at 11:52
enxaneta
5,2762415
answered Nov 11 at 11:52
enxaneta
5,2762415
answered Nov 11 at 11:52
enxaneta
5,2762415
answered Nov 11 at 11:52
enxaneta
5,2762415
5,2762415
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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
