Question

我需要设计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>

Answer 1

您的代码中存在多个错误。

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>';

你不能在javascript中执行此操作，因为字符串在换行后会被切断。要继续该字符串，请将它们连接起来'str1' + 'str2'，或者使用\转义换行符。

<circle cx="30" cy="30" r="slider1" stroke="black" stroke-width="2" fill="none"/>

要将r的值设置为动态值slider1，您需要将其从字符串中排除。 r="' + slider1 + '"应该成功。

另外，您可以在html中将整个svg创建为静态，然后通过javascript更改特定模式元素的值。

<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>

然后，您可以使用getElementById访问模式内部的圆圈，并使用setAttribute("r", value)更改其半径。

链接到plunkr预览：http://embed.plnkr.co/BBsopyIjV5ae84W0PaSU/preview

Answer 2

我设法得到一个非常漂亮的华丽模式。用户移动滑块会改变中心圆的大小。花瓣也会以同样的方式改变。我轻松地走下去，使它们像交叉的星形。我现在正在努力获得一个按钮，用于随机化大小的圆圈。说实话，不知道是否有可能。你可以在这里看到它：http://pages.bangor.ac.uk/~abp4d9/

SVG模式通过Javascript控制的滑块

2 个答案: