Dzień dobry.
Mam powiedzmy taki fragment kodu:
<rect id="kbmp-f1" height="40" width="40" y="40.685" x="118.53" rx="5" ry="5"/> <!--F1-->
<rect id="kbmp-f2" height="40" width="40" y="40.685" x="158.53"/> <!--F2-->
jest to fragment svg. Pierwszy rect, ma zdefiniowane atrybuty rx
i ry
(radius
). Dzięki czemu, jego rogi są zaokrąglone, Ale jak zrobić to samo z drugim (i setką innych), bez ręcznego klepania w każdym z nich tego rx="5 ry="5"
?
Wiem, że można w svg zdefiniować styl. Jednak nie działa jak dam tam każdą z tych alternatyw od drugiej kolejno:
rect {
fill: blue; /*to akurat działa, ale to co poniżej już nie*/
}
rect {
border-radius: 10px; /* tak samo 10, 10pt 5 etc*/
}
rect {
rx: 5;
ry: 5;
/* NIE DZIAŁA */
}
Proszę o pomoc, bo klepanie setkę razy rx i ry to ostateczność i wolałbym jej uniknąć :D
Dzięki
M.
PS.
Póki co radzę sobie tym:
<script>
var el = document.querySelectorAll("rect");
for (var i = 0; i < el.length; i++) {
el[i].setAttribute("rx", "5");
el[i].setAttribute("ry", "5");
}
</script>