Question

我使用Adobe illustrator创建了一个svg门图像。图像有3个组件

门体
门中央的玻璃部件
门把手。＆GT;＆GT;

我想通过点击改变手柄，颜色，身体材料等按钮来改变这3个属性。我在Dreamweaver中打开了这个svg文件，它看起来很奇怪，有很长的图像链接和代码。我不知道从哪里开始。

由于

<?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>

Answer 1

这相当简单，最重要的部分是您在svg中包含html而不仅仅是图片src属性。以下不是Dreamweaver特有的。

例如：

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

现在，就像任何其他元素一样，您可以提供svg和path元素id和classes

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

从这里你可以使用事件监听器来实现这些特定元素（使用jQuery）来运行其他函数来自定义这些svg元素。

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

path和其他svg元素可以或多或少地用css设置样式，这使得这更容易。

这不是复制和粘贴的答案，但我希望它可以帮到你！

使用javascript / jquery通过按钮单击更改SVG图像属性

1 个答案: