SVG模式通过Javascript控制的滑块

SVG pattern through Javascript controlled sliders

本文关键字：控制 Javascript 模式 SVG      更新时间：2023-09-26

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

您的代码中有几个错误。

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

我设法制作了一个非常漂亮的花朵图案。用户移动滑块会改变中心圆的大小。花瓣的变化也是如此。我用一种简单的方法把它们做成交叉的星形。我现在正在努力让一个按钮工作，随机大小的圆圈。老实说，我甚至不知道这是否可能。你可以在这里看到：http://pages.bangor.ac.uk/~abp4d9/

相关文章：