svg 绘图上的 Javascript 函数

标签 javascript html function 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>

最佳答案

您可能过于字面地解释了触摸屏，按钮是单击而不是舔的。

此外，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>

关于svg 绘图上的 Javascript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29577320/

上一篇：javascript - 禁用/覆盖 Safari 中 popstate 事件的 anchor 跳转

下一篇：javascript - 用于注册到第三方网站的脚本

相关文章：

javascript - AngularJS - 如何通过 Handlebars 三元运算添加 HTML 元素？

JavaScript 函数调用在 IE 中不起作用

c# - 在 Entity Framework 查询中使用 C# 函数

javascript - 类型 'pseudoStyle' 上不存在属性 'HTMLElement'

javascript - reshape 存储在集合中的数组并导出为 CSV

javascript - 为什么不能导出默认对象内的函数

javascript - 按下LMB时如何使图像/div变小？

html - 不同操作系统版本的网站颜色变化

r - 计算行意味着无需提供列名称并根据每列总和有选择地删除列

javascript - 对async/await求值细节的误解

©2024 IT工具网  联系我们