SVG JS dynamic assignment

  • Test with texttags

    <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"> <defs> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path fill="none" stroke="#f1f1f1" d="M 0 0 H 20 V 20"/> </ pattern > </ defs > <!-- draw grid--> < rect width = "600" height = "400" fill = "url(#grid)" /> <!-- baseline alignment effect--> < path d = "M 100 0 V 300 M 0 100 H 400 M 0 200 H 400 M 0 300 H 400" stroke = "red" /> < text id = "textObject" x = "100" y = "100 " style = "font-size: 50px;"> ABCDEFG </ text> </ svg > < script > // dynamic data var dx = [ 10 , 20 , 30 , 40 , 50 ] var dy = [ 10 , 20 , 30 , 40 , 50 ] // set textObject.setAttribute( 'dx' , dx.join( ' ' ))</p> <pre><code>textObject.setAttribute('dy', dy.join(' ')) </code></pre> <p></script>

Leave a Comment

Your email address will not be published. Required fields are marked *