CODEWITHSUNDEEP
javascriptjquerysvg
Tony
Tony

Reputation: 33

Changing SVG image attributes by button click using javascript/jquery

I have created one svg door image using Adobe illustrator.The image has 3 components

  1. Door body
  2. Glass part in center of the door
  3. Door handle. >>

enter image description here

I want change the this 3 attributes by clicking buttons like changing handle, color, body material etc. I have open this svg file in dreamweaver and it's looking weird with long image links and codes. I don't know where to start with.

Thanks

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version:  6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0  0 612 792" xml:space="preserve">
  <rect x="146.889" y="134.444" fill="#6B4520" stroke="#000000" stroke-   miterlimit="10" width="328.889" height="487.777"/>
<path fill="#BDE5F1" stroke="#000000" stroke-miterlimit="10"  d="M372.998,351.667c0,38.2-25.577,67-66.998,67
c-41.421,0-71.002-28.8-71.002-67c0-38.2,27.579-64.667,69-  64.667C345.419,287,372.998,313.467,372.998,351.667z"/>
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="155.665"    y1="352.25" x2="174.25" y2="352.25">
  <stop  offset="0" style="stop-color:#FFFFFF"/>
  <stop  offset="0" style="stop-color:#603913"/>
  <stop  offset="0" style="stop-color:#000000"/>
  <stop  offset="0.0161" style="stop-color:#000000"/>
  <stop  offset="0.3333" style="stop-color:#D9CDC0"/>
  <stop  offset="0.5161" style="stop-color:#000000"/>
  <stop  offset="0.8763" style="stop-color:#FFFFFF"/>
  </linearGradient>
  <polygon fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="10"  points="171.333,430.556 164.958,434 159.111,430.556 
155.665,344.667 159.111,272.778 164.958,270.5 171.333,272.778 174.25,344.25  "/>
  </svg>

Upvotes: 1

Views: 1618

Answers (1)

8eecf0d2
8eecf0d2

Reputation: 1579

It's reasonably simple, the most important part is you include the svg within the html not simply as an image src attribute. The following is not dreamweaver specific.

For example:

<body>
   <!-- this won't work well -->
   <img src="/images/door.svg>
    ...
   <!-- this will work very well -->
    <svg>
        <path></path>
        <path></path>
    </svg>
    ...
</body>

Now just like any other element you can give the svg and path elements id's and classes

<svg id="door">
    <path id="handle"></path>
    <path id="window"></path>
</svg>

From here you can use event listeners to those specific elements for example (with jQuery) to run off other functions for the customization of these svg elements.

$('#handle').on('click', function(){
    $(this).css('fill', 'blue') // change path fill to blue
})

path's and other svg elements can more or less be styled with css which makes this a lot easier.

This isn't a copy and paste answer, but I hope it helps you!

Upvotes: 3

Related Questions