|
SVG, USE и смена стиля из JavaScript (JQuery)
#39365467
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
|
|
|
только начал изучать SVG поэтому строго не судите за корявости.
Цель такая, на страничке нужно показать несколько аналоговых часиков, которые должны показывать разное время.
с оформлением часиков проблем не возникло. нарисовал циферблат, три стрелки, для каждой стрелки создал свой стиль, для указания угла поворота. С помощью <USE> сделал клон и передал в стиле угловые параметры стрелок, все работает. Проблема возникает со сменой стиля из jquery... стиль ни в какую не меняется, что я не так делаю?
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
<svg id="clock" width="200px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cl" viewBox="0, 0, 100, 100">
<circle id="ciferblat" cx="50" cy="50" r="45" fill="skyblue" style="stroke-width: 1; stroke: black;"/>
<g id="riska">
<line x1="50" y1="5" x2="50" y2="10" style="stroke-width: 1; stroke: black;"/>
<line id="riska1" x1="50" y1="5" x2="50" y2="8" style="stroke-width: 0.5; stroke: black;" transform="rotate(6, 50, 50)"/>
<use xlink:href="#riska1" transform="rotate(6, 50, 50)"/>
<use xlink:href="#riska1" transform="rotate(12, 50, 50)"/>
<use xlink:href="#riska1" transform="rotate(18, 50, 50)"/>
</g>
<text x="43" y="22" font-size="12">12</text>
<use xlink:href="#riska" transform="rotate(30, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(30, 50, 50) rotate(-30, 50, 17.5)">1</text>
<use xlink:href="#riska" transform="rotate(60, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(60, 50, 50) rotate(-60, 50, 17.5)">2</text>
<use xlink:href="#riska" transform="rotate(90, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(90, 50, 50) rotate(-90, 50, 17.5)">3</text>
<use xlink:href="#riska" transform="rotate(120, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(120, 50, 50) rotate(-120, 50, 17.5)">4</text>
<use xlink:href="#riska" transform="rotate(150, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(150, 50, 50) rotate(-150, 50, 17.5)">5</text>
<use xlink:href="#riska" transform="rotate(180, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(180, 50, 50) rotate(-180, 50, 17.5)">6</text>
<use xlink:href="#riska" transform="rotate(210, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(210, 50, 50) rotate(-210, 50, 17.5)">7</text>
<use xlink:href="#riska" transform="rotate(240, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(240, 50, 50) rotate(-240, 50, 17.5)">8</text>
<use xlink:href="#riska" transform="rotate(270, 50, 50)"/>
<text x="46.5" y="22" font-size="12" transform="rotate(270, 50, 50) rotate(-270, 50, 17.5)">9</text>
<use xlink:href="#riska" transform="rotate(300, 50, 50)"/>
<text x="43" y="22" font-size="12" transform="rotate(300, 50, 50) rotate(-300, 50, 17.5)">10</text>
<use xlink:href="#riska" transform="rotate(330, 50, 50)"/>
<text x="43" y="22" font-size="12" transform="rotate(330, 50, 50) rotate(-330, 50, 17.5)">11</text>
<line id="hour_hand" x1="50" y1="30" x2="50" y2="60" style="stroke-width: 3; stroke: black; transform:rotate(var(--hour-hand));transform-origin: 50px 50px;"/>
<line id="minute_hand" x1="50" y1="14" x2="50" y2="60" style="stroke-width: 2; stroke: black; transform:rotate(var(--minute-hand));transform-origin: 50px 50px;"/>
<circle cx="50" cy="50" r="3" fill="black"/>
<line id="second_hand" x1="50" y1="10" x2="50" y2="60" style="stroke-width: 1; stroke: red; transform:rotate(var(--second-hand));transform-origin: 50px 50px;"/>
<circle cx="50" cy="50" r="2" fill="red"/>
</g>
</defs>
<use id="#cl0" xlink:href="#cl" x="0" y="0" style="--hour-hand:215deg; --minute-hand:135deg; --second-hand:75deg"/>
<use id="#cl2" xlink:href="#cl" x="100" y="0"/>
</svg>
1.
2.
3.
function clock_set(jsn){
$('#cl0').css("--second-hand", "180deg");
}
|
|
|
