Canvas not reading svg viewport inside another svg on safari
2
My issue is a little complicated.
I am rendering a canvas inside an <svg> which is inside another <svg>. <anvas> is reading on the viewport of outermost <svg> while completely ignoring the inner one.
Here is a jsfiddle with the complete code:
https://jsfiddle.net/doLfz1a0/1/
Here is a simplification of the issue:
canvas = $('#fontstyle_straight_2_canvas')[0]
font = '20px arial'
ctx = canvas.getContext('2d')
w = canvas.width
ctx.font = font
ctx.textBaseline = 'top'
ctx.textAlign = 'center'
ctx.lineWidth = 2
ctx.fillStyle = 'black'
text = 'blackdown'
ctx.fillText(text, w * 0.5, 0, w)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="288px" height="308.8804px" viewBox="0 0 288 308.8804">
<g>
<g>
<svg x="77.3999px" height="57.1001px" y="59px" width="133.6001px" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 160 160" style="display: inline;">
<g>
<g fill="#000000">
<rect x="8.4517" y="89.25" fill="red" width="146.5483" height="21.1494"></rect>
<foreignObject id="fontstyle_straight_2_fo" x="8.4517" y="89.25" fill="none" width="146.5483" height="31">
<canvas x="8.4517" y="89.25" width="146.5483" height="31" id="fontstyle_straight_2_canvas"></canvas>
</foreignObject>
</g>
</g>
</svg>
</g>
</g>
</svg>On Chrome and Firefox, the text rendered by the canvas API fits in the red rectangle, while in Safari 12.0.2, the canvas is completely off.
javascript html svg canvas viewport
edited Jan 1 at 8:11
Kaiido
42.8k464104
asked Jan 1 at 7:53
Mohammad AliMohammad Ali
204
add a comment |
2
My issue is a little complicated.
I am rendering a canvas inside an <svg> which is inside another <svg>. <anvas> is reading on the viewport of outermost <svg> while completely ignoring the inner one.
Here is a jsfiddle with the complete code:
https://jsfiddle.net/doLfz1a0/1/
Here is a simplification of the issue:
canvas = $('#fontstyle_straight_2_canvas')[0]
font = '20px arial'
ctx = canvas.getContext('2d')
w = canvas.width
ctx.font = font
ctx.textBaseline = 'top'
ctx.textAlign = 'center'
ctx.lineWidth = 2
ctx.fillStyle = 'black'
text = 'blackdown'
ctx.fillText(text, w * 0.5, 0, w)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="288px" height="308.8804px" viewBox="0 0 288 308.8804">
<g>
<g>
<svg x="77.3999px" height="57.1001px" y="59px" width="133.6001px" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 160 160" style="display: inline;">
<g>
<g fill="#000000">
<rect x="8.4517" y="89.25" fill="red" width="146.5483" height="21.1494"></rect>
<foreignObject id="fontstyle_straight_2_fo" x="8.4517" y="89.25" fill="none" width="146.5483" height="31">
<canvas x="8.4517" y="89.25" width="146.5483" height="31" id="fontstyle_straight_2_canvas"></canvas>
</foreignObject>
</g>
</g>
</svg>
</g>
</g>
</svg>On Chrome and Firefox, the text rendered by the canvas API fits in the red rectangle, while in Safari 12.0.2, the canvas is completely off.
javascript html svg canvas viewport
edited Jan 1 at 8:11
Kaiido
42.8k464104
asked Jan 1 at 7:53
Mohammad AliMohammad Ali
204
1
When your issue is complicated, simplify it. See How to create an Minimal, Complete, and Verifiable example. Here I made one for you, but next time, please do it directly.
– Kaiido
Jan 1 at 8:11
Why do you need a canvas to write the text? It can be done with SVG. Should you need a image instead of the text, it can be done with SVG, as you find out in your last question.
– enxaneta
Jan 1 at 8:13
@enxaneta finding why there is a discrepancy between implementations is a very valid question, moreover with the emergence of SVG2 which does change a lot of things in this area. And there are good cases one would want a canvas or other HTML foreign element to be correctly placed inside an svg.
– Kaiido
Jan 1 at 8:15
If you've found a webkit bug report it here
– Robert Longson
Jan 1 at 8:50
add a comment |
2
2
2
My issue is a little complicated.
I am rendering a canvas inside an <svg> which is inside another <svg>. <anvas> is reading on the viewport of outermost <svg> while completely ignoring the inner one.
Here is a jsfiddle with the complete code:
https://jsfiddle.net/doLfz1a0/1/
Here is a simplification of the issue:
canvas = $('#fontstyle_straight_2_canvas')[0]
font = '20px arial'
ctx = canvas.getContext('2d')
w = canvas.width
ctx.font = font
ctx.textBaseline = 'top'
ctx.textAlign = 'center'
ctx.lineWidth = 2
ctx.fillStyle = 'black'
text = 'blackdown'
ctx.fillText(text, w * 0.5, 0, w)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="288px" height="308.8804px" viewBox="0 0 288 308.8804">
<g>
<g>
<svg x="77.3999px" height="57.1001px" y="59px" width="133.6001px" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 160 160" style="display: inline;">
<g>
<g fill="#000000">
<rect x="8.4517" y="89.25" fill="red" width="146.5483" height="21.1494"></rect>
<foreignObject id="fontstyle_straight_2_fo" x="8.4517" y="89.25" fill="none" width="146.5483" height="31">
<canvas x="8.4517" y="89.25" width="146.5483" height="31" id="fontstyle_straight_2_canvas"></canvas>
</foreignObject>
</g>
</g>
</svg>
</g>
</g>
</svg>On Chrome and Firefox, the text rendered by the canvas API fits in the red rectangle, while in Safari 12.0.2, the canvas is completely off.
javascript html svg canvas viewport
edited Jan 1 at 8:11
Kaiido
42.8k464104
asked Jan 1 at 7:53
Mohammad AliMohammad Ali
204
My issue is a little complicated.
I am rendering a canvas inside an <svg> which is inside another <svg>. <anvas> is reading on the viewport of outermost <svg> while completely ignoring the inner one.
Here is a jsfiddle with the complete code:
https://jsfiddle.net/doLfz1a0/1/
Here is a simplification of the issue:
canvas = $('#fontstyle_straight_2_canvas')[0]
font = '20px arial'
ctx = canvas.getContext('2d')
w = canvas.width
ctx.font = font
ctx.textBaseline = 'top'
ctx.textAlign = 'center'
ctx.lineWidth = 2
ctx.fillStyle = 'black'
text = 'blackdown'
ctx.fillText(text, w * 0.5, 0, w)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="288px" height="308.8804px" viewBox="0 0 288 308.8804">
<g>
<g>
<svg x="77.3999px" height="57.1001px" y="59px" width="133.6001px" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 160 160" style="display: inline;">
<g>
<g fill="#000000">
<rect x="8.4517" y="89.25" fill="red" width="146.5483" height="21.1494"></rect>
<foreignObject id="fontstyle_straight_2_fo" x="8.4517" y="89.25" fill="none" width="146.5483" height="31">
<canvas x="8.4517" y="89.25" width="146.5483" height="31" id="fontstyle_straight_2_canvas"></canvas>
</foreignObject>
</g>
</g>
</svg>
</g>
</g>
</svg>On Chrome and Firefox, the text rendered by the canvas API fits in the red rectangle, while in Safari 12.0.2, the canvas is completely off.
canvas = $('#fontstyle_straight_2_canvas')[0]
font = '20px arial'
ctx = canvas.getContext('2d')
w = canvas.width
ctx.font = font
ctx.textBaseline = 'top'
ctx.textAlign = 'center'
ctx.lineWidth = 2
ctx.fillStyle = 'black'
text = 'blackdown'
ctx.fillText(text, w * 0.5, 0, w)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="288px" height="308.8804px" viewBox="0 0 288 308.8804">
<g>
<g>
<svg x="77.3999px" height="57.1001px" y="59px" width="133.6001px" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 160 160" style="display: inline;">
<g>
<g fill="#000000">
<rect x="8.4517" y="89.25" fill="red" width="146.5483" height="21.1494"></rect>
<foreignObject id="fontstyle_straight_2_fo" x="8.4517" y="89.25" fill="none" width="146.5483" height="31">
<canvas x="8.4517" y="89.25" width="146.5483" height="31" id="fontstyle_straight_2_canvas"></canvas>
</foreignObject>
</g>
</g>
</svg>
</g>
</g>
</svg>canvas = $('#fontstyle_straight_2_canvas')[0]
font = '20px arial'
ctx = canvas.getContext('2d')
w = canvas.width
ctx.font = font
ctx.textBaseline = 'top'
ctx.textAlign = 'center'
ctx.lineWidth = 2
ctx.fillStyle = 'black'
text = 'blackdown'
ctx.fillText(text, w * 0.5, 0, w)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="288px" height="308.8804px" viewBox="0 0 288 308.8804">
<g>
<g>
<svg x="77.3999px" height="57.1001px" y="59px" width="133.6001px" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 160 160" style="display: inline;">
<g>
<g fill="#000000">
<rect x="8.4517" y="89.25" fill="red" width="146.5483" height="21.1494"></rect>
<foreignObject id="fontstyle_straight_2_fo" x="8.4517" y="89.25" fill="none" width="146.5483" height="31">
<canvas x="8.4517" y="89.25" width="146.5483" height="31" id="fontstyle_straight_2_canvas"></canvas>
</foreignObject>
</g>
</g>
</svg>
</g>
</g>
</svg>javascript html svg canvas viewport
javascript html svg canvas viewport
edited Jan 1 at 8:11
Kaiido
42.8k464104
asked Jan 1 at 7:53
Mohammad AliMohammad Ali
204
edited Jan 1 at 8:11
Kaiido
42.8k464104
asked Jan 1 at 7:53
Mohammad AliMohammad Ali
204
edited Jan 1 at 8:11
Kaiido
42.8k464104
edited Jan 1 at 8:11
Kaiido
42.8k464104
edited Jan 1 at 8:11
Kaiido
42.8k464104
42.8k464104
asked Jan 1 at 7:53
Mohammad AliMohammad Ali
204
asked Jan 1 at 7:53
Mohammad AliMohammad Ali
204
asked Jan 1 at 7:53
Mohammad AliMohammad Ali
204
204
1
When your issue is complicated, simplify it. See How to create an Minimal, Complete, and Verifiable example. Here I made one for you, but next time, please do it directly.
– Kaiido
Jan 1 at 8:11
Why do you need a canvas to write the text? It can be done with SVG. Should you need a image instead of the text, it can be done with SVG, as you find out in your last question.
– enxaneta
Jan 1 at 8:13
@enxaneta finding why there is a discrepancy between implementations is a very valid question, moreover with the emergence of SVG2 which does change a lot of things in this area. And there are good cases one would want a canvas or other HTML foreign element to be correctly placed inside an svg.
– Kaiido
Jan 1 at 8:15
If you've found a webkit bug report it here
– Robert Longson
Jan 1 at 8:50
add a comment |
1
When your issue is complicated, simplify it. See How to create an Minimal, Complete, and Verifiable example. Here I made one for you, but next time, please do it directly.
– Kaiido
Jan 1 at 8:11
Why do you need a canvas to write the text? It can be done with SVG. Should you need a image instead of the text, it can be done with SVG, as you find out in your last question.
– enxaneta
Jan 1 at 8:13
@enxaneta finding why there is a discrepancy between implementations is a very valid question, moreover with the emergence of SVG2 which does change a lot of things in this area. And there are good cases one would want a canvas or other HTML foreign element to be correctly placed inside an svg.
– Kaiido
Jan 1 at 8:15
If you've found a webkit bug report it here
– Robert Longson
Jan 1 at 8:50
1
1
When your issue is complicated, simplify it. See How to create an Minimal, Complete, and Verifiable example. Here I made one for you, but next time, please do it directly.
– Kaiido
Jan 1 at 8:11
When your issue is complicated, simplify it. See How to create an Minimal, Complete, and Verifiable example. Here I made one for you, but next time, please do it directly.
– Kaiido
Jan 1 at 8:11
Why do you need a canvas to write the text? It can be done with SVG. Should you need a image instead of the text, it can be done with SVG, as you find out in your last question.
– enxaneta
Jan 1 at 8:13
Why do you need a canvas to write the text? It can be done with SVG. Should you need a image instead of the text, it can be done with SVG, as you find out in your last question.
– enxaneta
Jan 1 at 8:13
@enxaneta finding why there is a discrepancy between implementations is a very valid question, moreover with the emergence of SVG2 which does change a lot of things in this area. And there are good cases one would want a canvas or other HTML foreign element to be correctly placed inside an svg.
– Kaiido
Jan 1 at 8:15
@enxaneta finding why there is a discrepancy between implementations is a very valid question, moreover with the emergence of SVG2 which does change a lot of things in this area. And there are good cases one would want a canvas or other HTML foreign element to be correctly placed inside an svg.
– Kaiido
Jan 1 at 8:15
If you've found a webkit bug report it here
– Robert Longson
Jan 1 at 8:50
If you've found a webkit bug report it here
– Robert Longson
Jan 1 at 8:50
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
});
}
});
draft saved
draft discarded
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%2f53993887%2fcanvas-not-reading-svg-viewport-inside-another-svg-on-safari%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
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53993887%2fcanvas-not-reading-svg-viewport-inside-another-svg-on-safari%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
When your issue is complicated, simplify it. See How to create an Minimal, Complete, and Verifiable example. Here I made one for you, but next time, please do it directly.
– Kaiido
Jan 1 at 8:11
Why do you need a canvas to write the text? It can be done with SVG. Should you need a image instead of the text, it can be done with SVG, as you find out in your last question.
– enxaneta
Jan 1 at 8:13
@enxaneta finding why there is a discrepancy between implementations is a very valid question, moreover with the emergence of SVG2 which does change a lot of things in this area. And there are good cases one would want a canvas or other HTML foreign element to be correctly placed inside an svg.
– Kaiido
Jan 1 at 8:15
If you've found a webkit bug report it here
– Robert Longson
Jan 1 at 8:50