Я пытаюсь создать программу, которая выдает смайлик и три кнопки: одну, чтобы сделать лицо желтым, а две другие, чтобы глаза стали черными. Вот код, который у меня есть:
JS Файл
var fill1 = "#ffff00";
var fill2 = "#000000";
$svg = $("#smiley");
var color = function () {
$("#ChangeFace").click(function(){ $("#face", $svg).attr('style', "fill:"+fill1) });
$("#ChangeLEye").click(function(){ $("#Leye", $svg).attr('style', "fill:"+fill2) });
$("#ChangeREye").click(function(){ $("#Reye", $svg).attr('style', "fill:"+fill2) });
};`
SVG-файл
<svg id="smiley" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle id="face" cx="100" cy="100" r="70" style="stroke: yellow; stroke-width: 4; fill: none"/>
<circle id="Leye" cx="75" cy="75" r="10" style="stroke: black; stroke-width: 1; fill: none"/>
<circle id="Reye" cx="125" cy="75" r="10" style="stroke: black; stroke-width: 1; fill: none"/>
<path id= "mouth" d="M75,120 Q100,145 125,120" style="stroke: black; stroke-width: 6; fill: none"/>
</svg>`
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<object type="image/svg+xml" data="smiley.svg" width="200" height="200">
<script type="text/javascript" src="Smiley_Manipulation.js"></script>
<script>
$(document).ready(color);
</script>
</head>
<body>
<button id="ChangeFace">Face</button>
<button id="ChangeLEye">Left Eye</button>
<button id="ChangeREye">Right Eye</button>
</body>
</html>
Эта программа отображает лицо, но по какой-то причине кнопки не отображаются. Любая помощь будет принята с благодарностью.