Функция Javascript на рисунке svg

Я хочу скопировать несколько маленьких цветов вокруг большого, поэтому я создал радиокнопки, чтобы пользователи могли выбирать, сколько копий они хотят. Затем я создал скрытые копии маленьких цветов с их местоположениями, после чего я попытался использовать переключатели, но они не работали, как я думал.Функция Javascript на рисунке svg

</html> 
<head> 
<script> 
function check(){ 
if(document.getElementById('one').checked){ 
     document.getElementById('FirstCo').style.strokeWidth='1'; 
     } 
    if (document.getElementById('two').checked){ 
     document.getElementById('SecondCo').style.strokeWidth='1'; 
     } 
    if (document.getElementById('Three').checked){ 
     document.getElementById('ThirdCo').style.strokeWidth='1'; 
    } 
    if (document.getElementById('Four').checked){ 
     document.getElementById('FourthCo').style.strokeWidth='1'; 
} 
} 

</script> 
</head> 
<body> 
<div> 
<input type="radio" name="copies" id="one" onlick="check()"value ="onecopy">One</br> 

      <input type="radio" name="copies" id="two" onlick="check()" value ="twocopies">Two</br> 

      <input type="radio" name="copies" id="Three" onlick="check()" value ="threecopies">Three</br> 

      <input type="radio" name="copies" id="Four" onlick="check()" value ="fourcopies">Four</br> 
</div> 
</body> 
<svg> 
<g id = "FirstCo" style="fill:none;stroke:black;stroke-width:0"> 

    <circle cx="315" cy="60" r="5"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(45 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(90 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(135 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(180 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(225 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(270 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(315 315 60)"/> 

<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(360 315 60)"/> 
</g> 
<g id = "SecondCo" style="fill:none;stroke:black;stroke-width:0"> 

<circle cx="530" cy="300" r="5"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(45 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(90 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(135 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(180 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(225 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(270 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(315 530 300)"/> 

<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(360 530 300)"/> 
<g id = "ThirdCo" style="fill:none;stroke:black;stroke-width:0"> 

    <circle cx="310" cy="530" r="5"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(45 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(90 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(135 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(180 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(225 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(270 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(315 310 530)"/> 

<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(360 310 530)"/> 
</g> 

<g id = "FourthCo" style="fill:none;stroke:black;stroke-width:0"> 

<circle cx="100" cy="300" r="5"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(45 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(90 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(135 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(180 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(225 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(270 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(315 100 300)"/> 

<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(360 100 300)"/> 

</g> 
</svg> 
</html>

источник

2015-04-11 Farah AlQ

Это '' не onClick' onlick'. –

Я поднимусь только потому, что эта опечатка сделала мой день. Надеюсь, скоро будут такие события. – Kaiido

Возможно, вы толковали сенсорный экран буквально, кнопки были нажаты, а не лизали.

Кроме того, svg должен находиться в теле и иметь атрибуты размера.

<html style="width:100%;height:100%;"> 
 
<head> 
 
<script> 
 
function check(){ 
 
if(document.getElementById('one').checked){ 
 
     document.getElementById('FirstCo').style.strokeWidth='1'; 
 
     } 
 
    if (document.getElementById('two').checked){ 
 
     document.getElementById('SecondCo').style.strokeWidth='1'; 
 
     } 
 
    if (document.getElementById('Three').checked){ 
 
     document.getElementById('ThirdCo').style.strokeWidth='1'; 
 
    } 
 
    if (document.getElementById('Four').checked){ 
 
     document.getElementById('FourthCo').style.strokeWidth='1'; 
 
} 
 
} 
 

 
</script> 
 
</head> 
 
<body style="width:100%;height:100%;"> 
 
<div> 
 
    <input type="radio" name="copies" id="one" onclick="check()" value ="onecopy">One<br /> 
 

 
    <input type="radio" name="copies" id="two" onclick="check()" value ="twocopies">Two<br /> 
 

 
    <input type="radio" name="copies" id="Three" onclick="check()" value ="threecopies">Three<br /> 
 

 
    <input type="radio" name="copies" id="Four" onclick="check()" value ="fourcopies">Four<br /> 
 
</div> 
 

 
<svg width="100%" height="100%"> 
 
<g id = "FirstCo" style="fill:none;stroke:black;stroke-width:0"> 
 

 
    <circle cx="315" cy="60" r="5"/> 
 

 
<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(45 315 60)"/> 
 

 
<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(90 315 60)"/> 
 

 
<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(135 315 60)"/> 
 

 
<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(180 315 60)"/> 
 

 
<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(225 315 60)"/> 
 

 
<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(270 315 60)"/> 
 

 
<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(315 315 60)"/> 
 

 
<ellipse cx="340" cy="60" rx="20" ry="7" transform="rotate(360 315 60)"/> 
 
</g> 
 
<g id = "SecondCo" style="fill:none;stroke:black;stroke-width:1"> 
 

 
<circle cx="530" cy="300" r="5"/> 
 

 
<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(45 530 300)"/> 
 

 
<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(90 530 300)"/> 
 

 
<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(135 530 300)"/> 
 

 
<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(180 530 300)"/> 
 

 
<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(225 530 300)"/> 
 

 
<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(270 530 300)"/> 
 

 
<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(315 530 300)"/> 
 

 
<ellipse cx="505" cy="300" rx="20" ry="7" transform="rotate(360 530 300)"/> 
 
<g id = "ThirdCo" style="fill:none;stroke:black;stroke-width:0"> 
 

 
    <circle cx="310" cy="530" r="5"/> 
 

 
<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(45 310 530)"/> 
 

 
<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(90 310 530)"/> 
 

 
<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(135 310 530)"/> 
 

 
<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(180 310 530)"/> 
 

 
<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(225 310 530)"/> 
 

 
<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(270 310 530)"/> 
 

 
<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(315 310 530)"/> 
 

 
<ellipse cx="285" cy="530" rx="20" ry="7" transform="rotate(360 310 530)"/> 
 
</g> 
 

 
<g id = "FourthCo" style="fill:none;stroke:black;stroke-width:0"> 
 

 
<circle cx="100" cy="300" r="5"/> 
 

 
<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(45 100 300)"/> 
 

 
<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(90 100 300)"/> 
 

 
<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(135 100 300)"/> 
 

 
<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(180 100 300)"/> 
 

 
<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(225 100 300)"/> 
 

 
<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(270 100 300)"/> 
 

 
<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(315 100 300)"/> 
 

 
<ellipse cx="125" cy="300" rx="20" ry="7" transform="rotate(360 100 300)"/> 
 

 
</g> 
 
    </svg> 
 
</body> 
 
</html>

источник

2015-04-11 12:45:39

это не весь мой код. Я только скопирую тот, на который у меня есть вопрос, все, что вы упомянули, уже написано. –

Я понятия не имею, что означает ваш комментарий. Код в вопросе не работает, исправленный код в моем ответе. –

«Возможно, вы слишком толковали сенсорный экран, кнопки нажимались, а не лизали». : D – OddDev

Функция Javascript на рисунке svg

ответ

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