Изменение цветов SVG

Я начинаю изучать JS, и у меня есть эта (возможно, очень простая) задача, с которой у меня проблемы. Итак, главная задача - изменить нижний зеленый треугольник на его цвет, в зависимости от того, какой цвет я нажимаю на верхний объект. я сделал что-то вроде этого:Изменение цветов SVG

<!DOCTYPE html> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>SVG, JavaScript</title> 
    <script type="text/javascript"> 
    function changeColor("triangle"){ 
    document.getElementById("group").getAttributeNS("fill"); 
    evt.target.setAttributeNS("fill"); 
    } 
    </script> 
    </head> 
<body> 
    <svg height="500" width="500"> 
     <g id="group"> 
      <rect x="0" y="0" width="200" height="200" style="fill:gray;stroke:none;stroke-width:0"/> 
      <rect id="red_triangle" x="0" y="0" width="100" height="100" style="fill:red;stroke:none;stroke-width:0"/> 
      <rect id="yellow_triangle"x="100" y="0" width="100" height="100" style="fill:yellow;stroke:none;stroke-width:0"/> 
      <rect id="blue_triangle"x="0" y="100" width="100" height="100" style="fill:blue;stroke:none;stroke-width:0v"/> 
      <rect id="green_triangle"x="100" y="100" width="100" height="100" style="fill:lime;stroke:none;stroke-width:0"/> 
      <ellipse cx="100" cy="100" rx="100" ry="100" style="fill:gray;stroke:none;stroke-width:0"/> 
      <polygon id="triangle" points="100,225 150,300 50,300" style="fill:lime;stroke:none;stroke-width:0" onclick="changeColor("triangle")"/> 
     </g> 
    </svg> 


</body> 
</html>

, но очевидно, что это не работает. Может ли кто-нибудь помочь мне с некоторым предложением?

источник

2014-11-20 Linda

// the string instead of argument name raises Error: unexpected string 
function changeColor("triangle"){ 

// you get the attribute but don't do anything with it. 
// and the group doesn't even have a fill attribute 
    document.getElementById("group").getAttributeNS("fill"); 

// here you try to set an attribute but setAttributeNS requires 3 arguments: namespace, attribute and value 
// simpler setAttribute would be enough, but the value would still be overwriten by style="fill:whatever" 
// and evt.target is undefined, there's no evt object 
    evt.target.setAttributeNS("fill"); 
}

затем в вашем SVG:

// the quotes are broken, 
// and here you pass a string which I'd assume to be the ID of an element you want to change 
onclick="changeColor("triangle")"

Так, в конце концов:

OnClick должно быть на исходных прямоугольников, а не цель треугольника: <rect onclick="changeColor('triangle', this)" /> где 'triangle' это идентификатор элемент, который вы хотите изменить, и this - ссылка на щелчок прямоугольника.

SVG:

<svg height="500" width="500"> 
    <g id="group"> 
     <rect x="0" y="0" width="200" height="200" style="fill:gray;stroke:none;stroke-width:0"/> 
     <rect id="red_triangle" x="0" y="0" width="100" height="100" style="fill:red;stroke:none;stroke-width:0" onclick="changeColor('triangle', this)"/> 
     <rect id="yellow_triangle"x="100" y="0" width="100" height="100" style="fill:yellow;stroke:none;stroke-width:0" onclick="changeColor('triangle', this)"/> 
     <rect id="blue_triangle"x="0" y="100" width="100" height="100" style="fill:blue;stroke:none;stroke-width:0v" onclick="changeColor('triangle', this)"/> 
     <rect id="green_triangle"x="100" y="100" width="100" height="100" style="fill:lime;stroke:none;stroke-width:0" onclick="changeColor('triangle', this)"/> 
     <ellipse cx="100" cy="100" rx="100" ry="100" style="fill:gray;stroke:none;stroke-width:0"/> 
     <polygon id="triangle" points="100,225 150,300 50,300" style="fill:lime;stroke:none;stroke-width:0" /> 
    </g> 
</svg>

JS:

function changeColor(target, source){ 
    var color = source.style.fill; 
    document.getElementById(target).style["fill"] = color; 
}

Fiddle: http://jsfiddle.net/harg5kyz/1/

источник

2014-11-20 11:52:27 pawel

спасибо так много! – Linda

Изменение цветов SVG

ответ

Смежные вопросы