whats the best way to have text inside a svg code?
up vote
0
down vote
favorite
I have a 4 page leaflet (in perspective view) designed with illustrator and exported as SVG .I have some text on each page of the leaflet , its too heavy for web rendering ,(as the text is converted to paths). so I decided to keep the base leaflet as SVG and find a way to simulate perspective in the accompanying text and match it to the leaflets perspective, I also found the scripts to make the perspective happen but as soon as I place (inline)the perspective text in the SVG code it acts in a very different way I've made screenshots of the end result I want to achieve so you can see what I mean.
desired end result image
i use foreignObject tag to implement html inside svg .
code i did and whats happening
html css svg perspective
asked Nov 17 at 10:57
alireza
62
|
show 11 more comments
up vote
0
down vote
favorite
I have a 4 page leaflet (in perspective view) designed with illustrator and exported as SVG .I have some text on each page of the leaflet , its too heavy for web rendering ,(as the text is converted to paths). so I decided to keep the base leaflet as SVG and find a way to simulate perspective in the accompanying text and match it to the leaflets perspective, I also found the scripts to make the perspective happen but as soon as I place (inline)the perspective text in the SVG code it acts in a very different way I've made screenshots of the end result I want to achieve so you can see what I mean.
desired end result image
i use foreignObject tag to implement html inside svg .
code i did and whats happening
html css svg perspective
asked Nov 17 at 10:57
alireza
62
How about SVG’s<text>element?
– MTCoster
Nov 17 at 10:59
1
@MTCoster very difficult to add styles like height or width , or must add each single row of text inside a separated text tag , i tried this before but not a good deal . i think its good to one single row text not a paragraph
– alireza
Nov 17 at 11:19
Your live example doesn't make it clear what you want to happen there. Is it that the perspective doesn't fit what you want to achieve? Were you unable to position the text correctly? Is it that the div is cut off? (that one is easily corrected withoverflow:visbleon the foreignObject)
– ccprog
Nov 17 at 16:21
@ccprog see the page example inspect the text element , its jump out of parent div , see the parent div is in a correct place of its parent , and when you resize window every thing behave responsive except text, in addition even h2 tag and p tag are on a correct way , but text inside them just jump out there . is not it abnormal ?!
– alireza
Nov 18 at 11:27
I would suggest you don't use a foreignObject. It is not entirely surprising to me that the 3D transform on a<div>inside a<foreignObject>does not behave correctly. You are probing the dark boundary of the browser there :). Why not just pull your<div>out of the SVG and just give it the 3D transform to position it over the correct part of the SVG? You could even put the SVG for one page in the div and then everything on the page would get the correct perspective transform. For example lines would get smaller towards the back.
– Paul LeBeau
2 days ago
|
show 11 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a 4 page leaflet (in perspective view) designed with illustrator and exported as SVG .I have some text on each page of the leaflet , its too heavy for web rendering ,(as the text is converted to paths). so I decided to keep the base leaflet as SVG and find a way to simulate perspective in the accompanying text and match it to the leaflets perspective, I also found the scripts to make the perspective happen but as soon as I place (inline)the perspective text in the SVG code it acts in a very different way I've made screenshots of the end result I want to achieve so you can see what I mean.
desired end result image
i use foreignObject tag to implement html inside svg .
code i did and whats happening
html css svg perspective
asked Nov 17 at 10:57
alireza
62
I have a 4 page leaflet (in perspective view) designed with illustrator and exported as SVG .I have some text on each page of the leaflet , its too heavy for web rendering ,(as the text is converted to paths). so I decided to keep the base leaflet as SVG and find a way to simulate perspective in the accompanying text and match it to the leaflets perspective, I also found the scripts to make the perspective happen but as soon as I place (inline)the perspective text in the SVG code it acts in a very different way I've made screenshots of the end result I want to achieve so you can see what I mean.
desired end result image
i use foreignObject tag to implement html inside svg .
code i did and whats happening
html css svg perspective
html css svg perspective
asked Nov 17 at 10:57
alireza
62
asked Nov 17 at 10:57
alireza
62
asked Nov 17 at 10:57
alireza
62
asked Nov 17 at 10:57
alireza
62
asked Nov 17 at 10:57
alireza
62
62
How about SVG’s<text>element?
– MTCoster
Nov 17 at 10:59
1
@MTCoster very difficult to add styles like height or width , or must add each single row of text inside a separated text tag , i tried this before but not a good deal . i think its good to one single row text not a paragraph
– alireza
Nov 17 at 11:19
Your live example doesn't make it clear what you want to happen there. Is it that the perspective doesn't fit what you want to achieve? Were you unable to position the text correctly? Is it that the div is cut off? (that one is easily corrected withoverflow:visbleon the foreignObject)
– ccprog
Nov 17 at 16:21
@ccprog see the page example inspect the text element , its jump out of parent div , see the parent div is in a correct place of its parent , and when you resize window every thing behave responsive except text, in addition even h2 tag and p tag are on a correct way , but text inside them just jump out there . is not it abnormal ?!
– alireza
Nov 18 at 11:27
I would suggest you don't use a foreignObject. It is not entirely surprising to me that the 3D transform on a<div>inside a<foreignObject>does not behave correctly. You are probing the dark boundary of the browser there :). Why not just pull your<div>out of the SVG and just give it the 3D transform to position it over the correct part of the SVG? You could even put the SVG for one page in the div and then everything on the page would get the correct perspective transform. For example lines would get smaller towards the back.
– Paul LeBeau
2 days ago
|
show 11 more comments
How about SVG’s<text>element?
– MTCoster
Nov 17 at 10:59
1
@MTCoster very difficult to add styles like height or width , or must add each single row of text inside a separated text tag , i tried this before but not a good deal . i think its good to one single row text not a paragraph
– alireza
Nov 17 at 11:19
Your live example doesn't make it clear what you want to happen there. Is it that the perspective doesn't fit what you want to achieve? Were you unable to position the text correctly? Is it that the div is cut off? (that one is easily corrected withoverflow:visbleon the foreignObject)
– ccprog
Nov 17 at 16:21
@ccprog see the page example inspect the text element , its jump out of parent div , see the parent div is in a correct place of its parent , and when you resize window every thing behave responsive except text, in addition even h2 tag and p tag are on a correct way , but text inside them just jump out there . is not it abnormal ?!
– alireza
Nov 18 at 11:27
I would suggest you don't use a foreignObject. It is not entirely surprising to me that the 3D transform on a<div>inside a<foreignObject>does not behave correctly. You are probing the dark boundary of the browser there :). Why not just pull your<div>out of the SVG and just give it the 3D transform to position it over the correct part of the SVG? You could even put the SVG for one page in the div and then everything on the page would get the correct perspective transform. For example lines would get smaller towards the back.
– Paul LeBeau
2 days ago
How about SVG’s
<text> element?– MTCoster
Nov 17 at 10:59
How about SVG’s
<text> element?– MTCoster
Nov 17 at 10:59
1
1
@MTCoster very difficult to add styles like height or width , or must add each single row of text inside a separated text tag , i tried this before but not a good deal . i think its good to one single row text not a paragraph
– alireza
Nov 17 at 11:19
@MTCoster very difficult to add styles like height or width , or must add each single row of text inside a separated text tag , i tried this before but not a good deal . i think its good to one single row text not a paragraph
– alireza
Nov 17 at 11:19
Your live example doesn't make it clear what you want to happen there. Is it that the perspective doesn't fit what you want to achieve? Were you unable to position the text correctly? Is it that the div is cut off? (that one is easily corrected with
overflow:visble on the foreignObject)– ccprog
Nov 17 at 16:21
Your live example doesn't make it clear what you want to happen there. Is it that the perspective doesn't fit what you want to achieve? Were you unable to position the text correctly? Is it that the div is cut off? (that one is easily corrected with
overflow:visble on the foreignObject)– ccprog
Nov 17 at 16:21
@ccprog see the page example inspect the text element , its jump out of parent div , see the parent div is in a correct place of its parent , and when you resize window every thing behave responsive except text, in addition even h2 tag and p tag are on a correct way , but text inside them just jump out there . is not it abnormal ?!
– alireza
Nov 18 at 11:27
@ccprog see the page example inspect the text element , its jump out of parent div , see the parent div is in a correct place of its parent , and when you resize window every thing behave responsive except text, in addition even h2 tag and p tag are on a correct way , but text inside them just jump out there . is not it abnormal ?!
– alireza
Nov 18 at 11:27
I would suggest you don't use a foreignObject. It is not entirely surprising to me that the 3D transform on a
<div> inside a <foreignObject> does not behave correctly. You are probing the dark boundary of the browser there :). Why not just pull your <div> out of the SVG and just give it the 3D transform to position it over the correct part of the SVG? You could even put the SVG for one page in the div and then everything on the page would get the correct perspective transform. For example lines would get smaller towards the back.– Paul LeBeau
2 days ago
I would suggest you don't use a foreignObject. It is not entirely surprising to me that the 3D transform on a
<div> inside a <foreignObject> does not behave correctly. You are probing the dark boundary of the browser there :). Why not just pull your <div> out of the SVG and just give it the 3D transform to position it over the correct part of the SVG? You could even put the SVG for one page in the div and then everything on the page would get the correct perspective transform. For example lines would get smaller towards the back.– Paul LeBeau
2 days ago
|
show 11 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53350536%2fwhats-the-best-way-to-have-text-inside-a-svg-code%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
How about SVG’s
<text>element?– MTCoster
Nov 17 at 10:59
1
@MTCoster very difficult to add styles like height or width , or must add each single row of text inside a separated text tag , i tried this before but not a good deal . i think its good to one single row text not a paragraph
– alireza
Nov 17 at 11:19
Your live example doesn't make it clear what you want to happen there. Is it that the perspective doesn't fit what you want to achieve? Were you unable to position the text correctly? Is it that the div is cut off? (that one is easily corrected with
overflow:visbleon the foreignObject)– ccprog
Nov 17 at 16:21
@ccprog see the page example inspect the text element , its jump out of parent div , see the parent div is in a correct place of its parent , and when you resize window every thing behave responsive except text, in addition even h2 tag and p tag are on a correct way , but text inside them just jump out there . is not it abnormal ?!
– alireza
Nov 18 at 11:27
I would suggest you don't use a foreignObject. It is not entirely surprising to me that the 3D transform on a
<div>inside a<foreignObject>does not behave correctly. You are probing the dark boundary of the browser there :). Why not just pull your<div>out of the SVG and just give it the 3D transform to position it over the correct part of the SVG? You could even put the SVG for one page in the div and then everything on the page would get the correct perspective transform. For example lines would get smaller towards the back.– Paul LeBeau
2 days ago