Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Svg Variables

  1. #1
    New to the CF scene
    Join Date
    Dec 2002
    Location
    norman, oklahoma
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Svg Variables

    The following is very simple svg code representing four lines roughly in the shape of a box. What i would like to do is have the user ethier select choices in a puldown or enter text in a text box and then have what they entered/chose become a variable value that would be used in place of the linex or color values in the svg file. For example if the user entered 120 in a text box, than line x1 value would now be 120 instead of 94.

    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg width="765" height="417">
    <line x1="94" y1="67" x2="635" y2="73"


    style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:2"/>
    <line x1="665" y1="97" x2="641" y2="326"


    style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:2"/>
    <line x1="541" y1="356" x2="106" y2="273"


    style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:2"/>
    <line x1="100" y1="109" x2="59" y2="232"


    style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:2"/>
    </svg>

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    You're going to need to use DOM scripting to achieve this. No biggie, just gain element references and setAttribute('x1', newVal) on the boxes.

    As for providing form-based input, you may have to make use of the <foreignObject> and embed some inline XHTML.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •