Javascript 随机大小的SVG模式单元_Javascript_Html_Svg

Javascript 随机大小的SVG模式单元

javascript html svg

Javascript 随机大小的SVG模式单元,javascript,html,svg,Javascript,Html,Svg,我有一个花卉图案（），用户移动滑块（用于内圈和花瓣），花卉就会发生变化。现在有两大问题我无法解决： 1）花瓣被剪掉了。我尝试过改变SVG的宽度和高度、模式本身和元素。试图改变x和y。没有任何区别 2）我想随机化模式单位。我的第一站是圆圈。我希望图案保持不变，除了大小随机不同的圆圈。我到处都找过了，现在我不确定这个想法是否可行？我有一个随时可用的按钮和一个从数组中获取随机数的函数。图案看起来像这张图片（这张有随机花瓣）以下是我的带有SVG的HTML： <body onload="ref

我有一个花卉图案（），用户移动滑块（用于内圈和花瓣），花卉就会发生变化。现在有两大问题我无法解决： 1）花瓣被剪掉了。我尝试过改变SVG的宽度和高度、模式本身和元素。试图改变x和y。没有任何区别
2）我想随机化模式单位。我的第一站是圆圈。我希望图案保持不变，除了大小随机不同的圆圈。我到处都找过了，现在我不确定这个想法是否可行？我有一个随时可用的按钮和一个从数组中获取随机数的函数。图案看起来像这张图片（这张有随机花瓣）以下是我的带有SVG的HTML：

<body onload="refresh()">
<header>
  <h1>Create your own pattern</h1>
</header>
  <div class="controls">
    <table>
      <tr>
        <td><p>Cicle size: </p></td>
        <td><input id="slider1" type="range" min="5" max="28" onchange="refresh()"/></td>
        <td><p> Random Circle size: </p></td>
        <td><input id="randomCicle" type="button" value="Press here to activate" onClick="randomString();"></td>
      </tr>
      <tr>
        <td><p>Length of petals: </p></td>
        <td><input id="slider2" type="range" min="18" max="60" onchange="refreshPetals()"/></td>
      </tr>
      <tr>
        <td><p>Width of petals: </p></td>
        <td><input id="slider3" type="range" min="3" max="16" onchange="refreshWidth()"/></td>
      </tr>
      <tr>
      </tr>
    </table>
  </div>
 <div class="square">
  <svg width="520" height="520">
    <defs>
      <pattern id="pattern" x="5" y="5" width="140" height="140"
        patternUnits="userSpaceOnUse"
        patternTransform="rotate(45)">
        <path d="M 0 106 156 106" stroke="black" stroke-width="2" />
        <g width="140" height="140">
          <ellipse id="petal" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white"/>
          <ellipse id="petal1" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(35, 60, 40)"/>
          <ellipse id="petal2" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(70, 60, 40)"/>
          <ellipse id="petal3" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(105, 60, 40)"/>
          <ellipse id="petal4" cx=60 cy=40 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(140, 60, 40)"/>
        </g>
        <circle id="circleP" cx="60" cy="40" r="10" stroke="black" stroke-width="2" fill="white"/>
      </pattern>
    </defs>
    <rect x="10" y="10" width="500" height="500" stroke="black" stroke-width="4" fill="url(#pattern)"/>
  </svg>
</div>

回答你的问题的第一部分：花瓣被切掉，因为你定义了一个宽度140和高度140的图案区域，但不是把花画放在这个区域的中间（x＝70，y＝70），而是把它放在（x＝60，y＝40）。因此，花瓣会从图案区域的顶部脱落

我在这里为您解决了这个问题：

函数刷新（）{
var slider1=parseInt（document.getElementById（“slider1”）.value）；
document.getElementById（“circleP”）.setAttribute（“r”，滑块1）
}
函数refreshPetals（）{
var slider2=parseInt（document.getElementById（“slider2”）.value）；
document.getElementById（“petal”）.setAttribute（“rx”，幻灯片2）
document.getElementById（“petal1”）.setAttribute（“rx”，幻灯片2）
document.getElementById（“petal2”）.setAttribute（“rx”，幻灯片2）
document.getElementById（“petal3”）.setAttribute（“rx”，幻灯片2）
document.getElementById（“petal4”）.setAttribute（“rx”，幻灯片2）
}
函数refreshWidth（）{
var slider3=parseInt（document.getElementById（“slider3”）.value）；
document.getElementById（“petal”）.setAttribute（“ry”，幻灯片3）
document.getElementById（“petal1”）.setAttribute（“ry”，幻灯片3）
document.getElementById（“petal2”）.setAttribute（“ry”，slider3）
document.getElementById（“petal3”）.setAttribute（“ry”，slider3）
document.getElementById（“petal4”）.setAttribute（“ry”，slider3）
}
功能测试（）{
var值=[5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28]；
var VALUETUSE=values[Math.floor（Math.random（）*values.length）]；
}
美元（刷新）

创建自己的模式
圆环尺寸：
随机圆大小：
花瓣长度：
花瓣宽度：
非常感谢您！你已经回答了我的两个问题！！！我不想检查那些cx和cy参数。知道我不能通过SVG随机化我的花是一种极大的安慰，因为我的头在上下搜索了一个例子后才开始旋转（我只是想感谢你的正确和完整的答案；）@神经质的
  function refresh(){
   var slider1 = parseInt(document.getElementById("slider1").value);
   document.getElementById("circleP").setAttribute("r", slider1)
  }
  function refreshPetals(){
   var slider2 = parseInt(document.getElementById("slider2").value);
   document.getElementById("petal").setAttribute("rx", slider2)
   document.getElementById("petal1").setAttribute("rx", slider2)
   document.getElementById("petal2").setAttribute("rx", slider2)
   document.getElementById("petal3").setAttribute("rx", slider2)
   document.getElementById("petal4").setAttribute("rx", slider2)
  }
  function refreshWidth(){
   var slider3 = parseInt(document.getElementById("slider3").value);
   document.getElementById("petal").setAttribute("ry", slider3)
   document.getElementById("petal1").setAttribute("ry", slider3)
   document.getElementById("petal2").setAttribute("ry", slider3)
   document.getElementById("petal3").setAttribute("ry", slider3)
   document.getElementById("petal4").setAttribute("ry", slider3)
  }
 function test() {
var values = [5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28];
var valueToUse = values[Math.floor(Math.random() * values.length)];
}