jquery - two SVG on same page -



jquery - two SVG on same page -

i'm trying render 2 svg objects on same page first 1 rendered, sec page has text "this sec page text" not showing.

http://jsfiddle.net/mytv4/

<?xml version="1.0" encoding="utf-8" standalone="no" ?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" viewbox="0 0 936 629" preserveaspectratio="none"> <defs></defs> <g transform="translate(304.89 84)"> <text font-family="arial" font-size="20" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-83.89 19)"> <tspan x="0" y="-13" fill="rgb(0,0,0)">click todsfsdfs edit!</tspan> </text> </g> <g transform="translate(319.68 239)"> <text font-family="arial" font-size="20" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-81.68 19)"> <tspan x="0" y="-13" fill="rgb(0,0,0)">this blocked text</tspan> </text> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" viewbox="0 0 500 150" preserveaspectratio="none"> <defs></defs> <g transform="translate(255.46 254)"> <text font-family="arial" font-size="20" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #18bd18; opacity: 1;" transform="translate(-104.46 19)"> <tspan x="0" y="-13" fill="#18bd18">this sec page text</tspan> </text> </g> </svg>

and showing question mark character when server render it, don't know why showing character. when save page fine

http://screencast.com/t/zlqphb3vb

thanks

this part has pushed text away page

<g transform= "translate(255.46 254)" > <text font-family="arial" font-size="20" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #18bd18; opacity: 1;" transform= "translate(-104.46 19)" >

http://jsfiddle.net/vinodh/mytv4/1/

error in positioning (svg transform translate part)... "translate(-104.46 19)" pushes line in minus x axis direction 104.46px

recommend utilize vector based editor creating svg's such as adobe illustrator (paid), corel draw (paid), inkscape (free), svg edit (free)

regarding question marks... ! should encoding error server... seek seeing encoding server sending! should changed utf-8.

jquery html html5 svg

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -