通过Javascript控制的滑块实现SVG模式_Javascript_Svg

通过Javascript控制的滑块实现SVG模式

javascript svg

通过Javascript控制的滑块实现SVG模式,javascript,svg,Javascript,Svg,我需要设计一个SVG模式，并用滑块和单选按钮控制其元素。我的图案是斜放的花。我想控制花朵内部圆圈的大小、花瓣的数量和花瓣的长度。我还想有2个抖动按钮，以便用户可以随机圆圈的大小（花朵变得不同）和花瓣的数量。我尝试了4个单独的文件HTML、JS、CSS和SVG。看起来，浏览器无法管理单独的DOM树。现在我尝试使用内嵌SVG和JS。到目前为止，我的模式开始工作，但我不能连接它与滑块。请帮忙 <!DOCTYPE HTML> <html> <head>

我需要设计一个SVG模式，并用滑块和单选按钮控制其元素。我的图案是斜放的花。我想控制花朵内部圆圈的大小、花瓣的数量和花瓣的长度。我还想有2个抖动按钮，以便用户可以随机圆圈的大小（花朵变得不同）和花瓣的数量。我尝试了4个单独的文件HTML、JS、CSS和SVG。看起来，浏览器无法管理单独的DOM树。现在我尝试使用内嵌SVG和JS。到目前为止，我的模式开始工作，但我不能连接它与滑块。请帮忙

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Pattern editor">
    <meta name="keywords" content="HTML,CSS,SVG,JavaScript">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body onload="refresh()">
    <h1>Create your own pattern</h1>
      <div id="frame">
        <rect x="10" y="10" width="500" height="500" stroke="black"fill="url(#pattern)"/>
      </div>
      <div>Cicle size: <input id="slider1" type="range" min="3" max="30" onchange="refresh()"/></div>
      <div>Number of petals: <input id="slider2" type="range" min="1" max="60" onchange="refresh()"/></div>

  <script type="text/javascript">
    function refresh(){
      var pattern;
      var slider1 = parseInt(document.getElementById("slider1").value);



      pattern = '<svg width="600" height="600">
      x="20" y="10" width="140" height="140"
        patternUnits="userSpaceOnUse"
        patternTransform="rotate(45)">
       <circle cx="30" cy="30" r="slider1" stroke="black" stroke-width="2" fill="none"/>
      </svg>';
      document.getElementById("frame").innerHTML = pattern;
    }
  </script>
  </body>
  </html>


创建自己的模式
圆环尺寸：
花瓣数：
函数刷新（）{
var模式；
var slider1=parseInt（document.getElementById（“slider1”）.value）；
图案
x=“20”y=“10”width=“140”height=“140”
patternUnits=“userSpaceOnUse”
patternTransform=“旋转（45）”>
';
document.getElementById（“frame”）.innerHTML=pattern；
}

您的代码中有几个错误

pattern = '<svg width="600" height="600">
      x="20" y="10" width="140" height="140"
        patternUnits="userSpaceOnUse"
        patternTransform="rotate(45)">
       <circle cx="30" cy="30" r="slider1" stroke="black" stroke-width="2" fill="none"/>
      </svg>';

然后，您可以使用

getElementById

访问图案内部的圆，并使用

setAttribute（“r”，value）

更改其半径

链接到plunkr预览版：

我设法得到了一个非常漂亮的花朵图案。通过用户移动滑块，中心圆的大小会发生变化。花瓣也会以同样的方式变化。我用一种简单的方法把它们做成了相交的星形。我现在正在制作一个按钮，用于随机调整圆圈的大小。老实说，我不知道这是否可能。您可以在这里看到：

非常感谢。它回答了我的许多问题。在这个阶段，这对我来说是非常有价值的建议，因为我首先很难理解JS是如何工作的。它起作用了！它工作！！！我知道我离这里不远，只是一圈一圈地转。我感到困惑。这应该很容易。我喜欢你把JS分开放——漂亮干净的结构。我现在正在做花瓣。我认为它需要嵌套模式和透明的外部模式。

<svg width="600" height="600">
    <defs>
      <pattern id="pattern" x="20" y="10" width="140" height="140" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <circle id="circleP" cx="30" cy="30" r="10" stroke="black" stroke-width="2" fill="none" />
      </pattern>
    </defs>
    <rect x="10" y="10" width="500" height="500" stroke="black" fill="url(#pattern)" />
  </svg>