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
Post a Comment