Canvg - SVG Overflowing when using scale Unicorn Meta Zoo #1: Why another podcast? Announcing the arrival of Valued Associate #679: Cesar Manara Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!When to use double or single quotes in JavaScript?XPointers in SVGSVG viewBox to VML coordorigin/coordsizeHow to decide when to use Node.js?how to extract height and width from a svg fileXSLT generated SVG with right namespaceEpub Fixed Layout is not full screen in PortraitHow should an inline SVG look likehow to insert xmlns and xlink attributes into svg element/tag generated by c3 charts?imagemagick - convert does not work with use xlink:href in SVG - possible?
Stretch a Tikz tree
What is ls Largest Number Formed by only moving two sticks in 508?
Was Objective-C really a hindrance to Apple software development?
When speaking, how do you change your mind mid-sentence?
/bin/ls sorts differently than just ls
Protagonist's race is hidden - should I reveal it?
How would you suggest I follow up with coworkers about our deadline that's today?
Does a Draconic Bloodline sorcerer's doubled proficiency bonus for Charisma checks against dragons apply to all dragon types or only the chosen one?
Arriving in Atlanta after US Preclearance in Dublin. Will I go through TSA security in Atlanta to transfer to a connecting flight?
What is a 'Key' in computer science?
What's the difference between using dependency injection with a container and using a service locator?
What is /etc/mtab in Linux?
Israeli soda type drink
Why does Java have support for time zone offsets with seconds precision?
A journey... into the MIND
Is it accepted to use working hours to read general interest books?
How was Lagrange appointed professor of mathematics so early?
Like totally amazing interchangeable sister outfit accessory swapping or whatever
Was there ever a LEGO store in Miami International Airport?
Is a self contained air-bullet cartridge feasible?
"Working on a knee"
Can gravitational waves pass through a black hole?
Why I cannot instantiate a class whose constructor is private in a friend class?
Married in secret, can marital status in passport be changed at a later date?
Canvg - SVG Overflowing when using scale
Unicorn Meta Zoo #1: Why another podcast?
Announcing the arrival of Valued Associate #679: Cesar Manara
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!When to use double or single quotes in JavaScript?XPointers in SVGSVG viewBox to VML coordorigin/coordsizeHow to decide when to use Node.js?how to extract height and width from a svg fileXSLT generated SVG with right namespaceEpub Fixed Layout is not full screen in PortraitHow should an inline SVG look likehow to insert xmlns and xlink attributes into svg element/tag generated by c3 charts?imagemagick - convert does not work with use xlink:href in SVG - possible?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
Check this example here : https://jsfiddle.net/znbptw0c/
That SVG is extracted from amCharts library.
But when I change it to a canvas image using canvg and transform : scale on the SVG, it cuts off the scaled portion, how can I fix this?
I'm using scale because I need to increase resolution, not just size.
Changing the SVG width/height directly wouldn't be ideal as that could ruin some alignings in the bigger context, and I want the font size to increase also.
JS :
function svgToCanvas(svg)
const canvas = document.createElement('canvas');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
canvg(canvas, svg.outerHTML);
window.open(canvas.toDataURL("image/png",1.0))
return canvas;
const svg = document.body.querySelector('svg');
svgToCanvas(svg)
HTML (too big, please check fiddle):
<svg version="1.1" style="position: absolute; width: 1366px; height: 693px; top: 0px; left: 0px;transform: scale(1.5);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
</svg>
javascript html svg canvg
asked Mar 22 at 14:47
MojimiMojimi
4481033
add a comment |
Check this example here : https://jsfiddle.net/znbptw0c/
That SVG is extracted from amCharts library.
But when I change it to a canvas image using canvg and transform : scale on the SVG, it cuts off the scaled portion, how can I fix this?
I'm using scale because I need to increase resolution, not just size.
Changing the SVG width/height directly wouldn't be ideal as that could ruin some alignings in the bigger context, and I want the font size to increase also.
JS :
function svgToCanvas(svg)
const canvas = document.createElement('canvas');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
canvg(canvas, svg.outerHTML);
window.open(canvas.toDataURL("image/png",1.0))
return canvas;
const svg = document.body.querySelector('svg');
svgToCanvas(svg)
HTML (too big, please check fiddle):
<svg version="1.1" style="position: absolute; width: 1366px; height: 693px; top: 0px; left: 0px;transform: scale(1.5);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
</svg>
javascript html svg canvg
asked Mar 22 at 14:47
MojimiMojimi
4481033
Do not scale. Use this:<svg viewBox="0 0 1366 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">instead of what you have now
– enxaneta
Mar 22 at 16:26
@enxaneta But I need to scale it to increase resolution, Also your solution just made a very tiny output
– Mojimi
Mar 22 at 16:57
An svg element takes the size of the container. Maybe the problem is the container element. Also, you may try to play with the font size
– enxaneta
Mar 22 at 17:12
If you don't mind the white space around the chart you may try a different viewBox:<svg viewBox="330 0 700 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
– enxaneta
Mar 22 at 17:18
add a comment |
Check this example here : https://jsfiddle.net/znbptw0c/
That SVG is extracted from amCharts library.
But when I change it to a canvas image using canvg and transform : scale on the SVG, it cuts off the scaled portion, how can I fix this?
I'm using scale because I need to increase resolution, not just size.
Changing the SVG width/height directly wouldn't be ideal as that could ruin some alignings in the bigger context, and I want the font size to increase also.
JS :
function svgToCanvas(svg)
const canvas = document.createElement('canvas');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
canvg(canvas, svg.outerHTML);
window.open(canvas.toDataURL("image/png",1.0))
return canvas;
const svg = document.body.querySelector('svg');
svgToCanvas(svg)
HTML (too big, please check fiddle):
<svg version="1.1" style="position: absolute; width: 1366px; height: 693px; top: 0px; left: 0px;transform: scale(1.5);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
</svg>
javascript html svg canvg
asked Mar 22 at 14:47
MojimiMojimi
4481033
Check this example here : https://jsfiddle.net/znbptw0c/
That SVG is extracted from amCharts library.
But when I change it to a canvas image using canvg and transform : scale on the SVG, it cuts off the scaled portion, how can I fix this?
I'm using scale because I need to increase resolution, not just size.
Changing the SVG width/height directly wouldn't be ideal as that could ruin some alignings in the bigger context, and I want the font size to increase also.
JS :
function svgToCanvas(svg)
const canvas = document.createElement('canvas');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
canvg(canvas, svg.outerHTML);
window.open(canvas.toDataURL("image/png",1.0))
return canvas;
const svg = document.body.querySelector('svg');
svgToCanvas(svg)
HTML (too big, please check fiddle):
<svg version="1.1" style="position: absolute; width: 1366px; height: 693px; top: 0px; left: 0px;transform: scale(1.5);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
</svg>
javascript html svg canvg
javascript html svg canvg
asked Mar 22 at 14:47
MojimiMojimi
4481033
asked Mar 22 at 14:47
MojimiMojimi
4481033
asked Mar 22 at 14:47
MojimiMojimi
4481033
asked Mar 22 at 14:47
MojimiMojimi
4481033
asked Mar 22 at 14:47
MojimiMojimi
4481033
4481033
Do not scale. Use this:<svg viewBox="0 0 1366 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">instead of what you have now
– enxaneta
Mar 22 at 16:26
@enxaneta But I need to scale it to increase resolution, Also your solution just made a very tiny output
– Mojimi
Mar 22 at 16:57
An svg element takes the size of the container. Maybe the problem is the container element. Also, you may try to play with the font size
– enxaneta
Mar 22 at 17:12
If you don't mind the white space around the chart you may try a different viewBox:<svg viewBox="330 0 700 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
– enxaneta
Mar 22 at 17:18
add a comment |
Do not scale. Use this:<svg viewBox="0 0 1366 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">instead of what you have now
– enxaneta
Mar 22 at 16:26
@enxaneta But I need to scale it to increase resolution, Also your solution just made a very tiny output
– Mojimi
Mar 22 at 16:57
An svg element takes the size of the container. Maybe the problem is the container element. Also, you may try to play with the font size
– enxaneta
Mar 22 at 17:12
If you don't mind the white space around the chart you may try a different viewBox:<svg viewBox="330 0 700 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
– enxaneta
Mar 22 at 17:18
Do not scale. Use this:
<svg viewBox="0 0 1366 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> instead of what you have now– enxaneta
Mar 22 at 16:26
Do not scale. Use this:
<svg viewBox="0 0 1366 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> instead of what you have now– enxaneta
Mar 22 at 16:26
@enxaneta But I need to scale it to increase resolution, Also your solution just made a very tiny output
– Mojimi
Mar 22 at 16:57
@enxaneta But I need to scale it to increase resolution, Also your solution just made a very tiny output
– Mojimi
Mar 22 at 16:57
An svg element takes the size of the container. Maybe the problem is the container element. Also, you may try to play with the font size
– enxaneta
Mar 22 at 17:12
An svg element takes the size of the container. Maybe the problem is the container element. Also, you may try to play with the font size
– enxaneta
Mar 22 at 17:12
If you don't mind the white space around the chart you may try a different viewBox:
<svg viewBox="330 0 700 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">– enxaneta
Mar 22 at 17:18
If you don't mind the white space around the chart you may try a different viewBox:
<svg viewBox="330 0 700 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">– enxaneta
Mar 22 at 17:18
add a comment |
0
active
oldest
votes
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%2f55302215%2fcanvg-svg-overflowing-when-using-scale%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f55302215%2fcanvg-svg-overflowing-when-using-scale%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
Do not scale. Use this:
<svg viewBox="0 0 1366 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">instead of what you have now– enxaneta
Mar 22 at 16:26
@enxaneta But I need to scale it to increase resolution, Also your solution just made a very tiny output
– Mojimi
Mar 22 at 16:57
An svg element takes the size of the container. Maybe the problem is the container element. Also, you may try to play with the font size
– enxaneta
Mar 22 at 17:12
If you don't mind the white space around the chart you may try a different viewBox:
<svg viewBox="330 0 700 693" version="1.1" style="position: absolute;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">– enxaneta
Mar 22 at 17:18