javascript - 具有不同模式单位的 svg

Question

我正在尝试用 SVG 做一些不同的事情。到处看，找不到是否有可能这样做:我有一个华丽的图案(http://pages.bangor.ac.uk/~abp4d9/)，用户可以在其中移动 slider (用于内圈和花瓣)和花朵变化。 我有一个可以使用的按钮。我希望它对图案应用随机不同大小的圆圈。 这是我的内联 SVG

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

以及部分相关的JS:

function refresh(){
    var slider1 = parseInt(document.getElementById("slider1").value);
    document.getElementById("circleP").setAttribute("r", slider1)
}
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)];
}

我的花也被一些看不见的线切断了。是 Chrome 的问题吗？

Answer 1

对于您的第一个问题，我猜您想知道如何获取按钮来更改 slider ？这就是你要问的吗？

下面应该做你想做的:

document.getElementById("slider1").value = <some random value>;
refresh();

function randomString() {
    document.getElementById("slider1").value = getRandomInt(5,28);
    refresh();
}


function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


function refresh(){
    console.log("a");
 var slider1 = parseInt(document.getElementById("slider1").value);
 document.getElementById("circleP").setAttribute("r", slider1)
}

<div>
    <input id="slider1" type="range" min="5" max="28" onchange="refresh()" value="5"/>
    
    <input id="randomCicle" type="button" value="Press here to activate" onclick="randomString();"/>
</div>
    
<svg width="200" height="200px" viewBox="0 0 60 60">
    <circle id="circleP" cx="30" cy="30" r="5"/>
</svg>

关于你的第二个问题。花被剪掉了，因为您正在绘制图案区域的边缘(特别是顶部)。如果将 patternTransform 更改为 "rotate(0)"，您将能够准确地看到发生了什么。