Question

我正在尝试与SVG做一些不同的事情。到处看，无法找到是否可能做到：我有一个华丽的模式（http://pages.bangor.ac.uk/~abp4d9/），用户移动滑块（内圈和花瓣）和鲜花变化。我有一个随时可以使用的按钮。我希望它将随机不同大小的圆圈应用于模式。这是我的内联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

对于你的第一个问题，我猜你想知道如何让按钮改变滑块？那是你在问什么？

以下应该做你想做的事：

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

＆＃13;

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

＆＃13;

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

＆＃13;

关于你的第二个问题。由于您正在抽出图案区域的边缘（特别是顶部），因此花朵被切断了。如果您将patternTransform更改为"rotate(0)"，您将能够准确了解所发生的情况。

Answer 2

1）花瓣被切断的问题是因为我把它们集中在我的SVG 140平方中间：cx和cy应该是70＆amp; 70不是60＆amp; 40 2）SVG中不可能使用不同的模式单元

svg具有不同的模式单位

2 个答案: