Scale down an image dynamically
In my SVG picture there are some text labels that are displayed dynamically in top part of the image. In some cases (i.e. smaller screen size, bigger font size), they partially disappear outside the vievBox (like if overflow: hidden; was set) - see the picture (the long word in the middle is the overflowing label).
My idea is to scale down the image so that the labels are visible. How to achieve this?
svg
asked Nov 22 '18 at 20:19
AbreQueVoyAbreQueVoy
3572924
add a comment |
In my SVG picture there are some text labels that are displayed dynamically in top part of the image. In some cases (i.e. smaller screen size, bigger font size), they partially disappear outside the vievBox (like if overflow: hidden; was set) - see the picture (the long word in the middle is the overflowing label).
My idea is to scale down the image so that the labels are visible. How to achieve this?
svg
asked Nov 22 '18 at 20:19
AbreQueVoyAbreQueVoy
3572924
1
make the viewBox bigger.
– Robert Longson
Nov 22 '18 at 22:40
Please update your question with a Minimal, Complete, and Verifiable example.
– Paul LeBeau
Nov 23 '18 at 4:22
add a comment |
In my SVG picture there are some text labels that are displayed dynamically in top part of the image. In some cases (i.e. smaller screen size, bigger font size), they partially disappear outside the vievBox (like if overflow: hidden; was set) - see the picture (the long word in the middle is the overflowing label).
My idea is to scale down the image so that the labels are visible. How to achieve this?
svg
asked Nov 22 '18 at 20:19
AbreQueVoyAbreQueVoy
3572924
In my SVG picture there are some text labels that are displayed dynamically in top part of the image. In some cases (i.e. smaller screen size, bigger font size), they partially disappear outside the vievBox (like if overflow: hidden; was set) - see the picture (the long word in the middle is the overflowing label).
My idea is to scale down the image so that the labels are visible. How to achieve this?
svg
svg
asked Nov 22 '18 at 20:19
AbreQueVoyAbreQueVoy
3572924
asked Nov 22 '18 at 20:19
AbreQueVoyAbreQueVoy
3572924
asked Nov 22 '18 at 20:19
AbreQueVoyAbreQueVoy
3572924
asked Nov 22 '18 at 20:19
AbreQueVoyAbreQueVoy
3572924
asked Nov 22 '18 at 20:19
AbreQueVoyAbreQueVoy
3572924
3572924
1
make the viewBox bigger.
– Robert Longson
Nov 22 '18 at 22:40
Please update your question with a Minimal, Complete, and Verifiable example.
– Paul LeBeau
Nov 23 '18 at 4:22
add a comment |
1
make the viewBox bigger.
– Robert Longson
Nov 22 '18 at 22:40
Please update your question with a Minimal, Complete, and Verifiable example.
– Paul LeBeau
Nov 23 '18 at 4:22
1
1
make the viewBox bigger.
– Robert Longson
Nov 22 '18 at 22:40
make the viewBox bigger.
– Robert Longson
Nov 22 '18 at 22:40
Please update your question with a Minimal, Complete, and Verifiable example.
– Paul LeBeau
Nov 23 '18 at 4:22
Please update your question with a Minimal, Complete, and Verifiable example.
– Paul LeBeau
Nov 23 '18 at 4:22
add a comment |
1 Answer
1
active
oldest
votes
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).
answered Nov 23 '18 at 12:05
AbreQueVoyAbreQueVoy
3572924
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%2f53437581%2fscale-down-an-image-dynamically%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
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).
answered Nov 23 '18 at 12:05
AbreQueVoyAbreQueVoy
3572924
add a comment |
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).
answered Nov 23 '18 at 12:05
AbreQueVoyAbreQueVoy
3572924
add a comment |
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).
answered Nov 23 '18 at 12:05
AbreQueVoyAbreQueVoy
3572924
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).
answered Nov 23 '18 at 12:05
AbreQueVoyAbreQueVoy
3572924
answered Nov 23 '18 at 12:05
AbreQueVoyAbreQueVoy
3572924
answered Nov 23 '18 at 12:05
AbreQueVoyAbreQueVoy
3572924
answered Nov 23 '18 at 12:05
AbreQueVoyAbreQueVoy
3572924
3572924
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%2f53437581%2fscale-down-an-image-dynamically%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
1
make the viewBox bigger.
– Robert Longson
Nov 22 '18 at 22:40
Please update your question with a Minimal, Complete, and Verifiable example.
– Paul LeBeau
Nov 23 '18 at 4:22