随机大小的SVG模式单位

时间：2015-04-15 13:52:49

标签： javascript html svg

我有一个华丽的模式（http://pages.bangor.ac.uk/~abp4d9/），用户可以移动滑块（内圈和花瓣）和花朵变化。现在有两大问题我无法解决： 1）花瓣被切断。我试过改变SVG的宽度和高度，模式本身，元素。尝试改变x和y。没有任何区别 2）我想随机化模式单元。我的第一站是圈子。我想让图案保持不变，除了随机不同大小的圆圈。我到处搜索，现在我不确定这个想法是否可能？我有一个可以使用的按钮和一个从数组中取随机数的函数。图案看起来像这张图片（这个图片有随机花瓣）enter image description here 这是我的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>

和JS：

  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)];
}

1 个答案:

答案 0 :(得分：3)

回答问题的第一部分：由于您定义了宽度为140和高度为140的图案区域，因此花瓣被切掉了，而不是将花卉绘图放在该区域的中间（x = 70，y = 70），你把它放在（x = 60，y = 40）。结果，花瓣离开了图案区域的顶部。

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

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)];
}
$(refresh);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="0" y="0" width="140" height="140"
        patternUnits="userSpaceOnUse"
        patternTransform="rotate(45)">
        <path d="M0 139H140" stroke="black" stroke-width="2" />
        <g width="140" height="140">
          <ellipse id="petal" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white"/>
          <ellipse id="petal1" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(36, 70, 70)"/>
          <ellipse id="petal2" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(72, 70, 70)"/>
          <ellipse id="petal3" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(108, 70, 70)"/>
          <ellipse id="petal4" cx=70 cy=70 rx=60 ry=10 stroke="black" stroke-width="2" fill="white" transform="rotate(144, 70, 70)"/>
        </g>
        <circle id="circleP" cx="70" cy="70" 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>

但是，您无法随机化花朵大小。该模式只会将它们渲染为一种尺寸。如果你想要不同大小的花朵，你也可以单独绘制它们而不是使用SVG图案。这对于一些Javascript来说应该不会太难。如果您遇到困难，请在这里发布另一个问题。

相关问题
最新问题