具有不同模式单位的 svg答案

【问题标题】：svg with different pattern units具有不同模式单位的 svg
【发布时间】：2015-04-20 16:31:06
【问题描述】：

我正在尝试用 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 的问题吗？

【问题讨论】：

在问题中输入代码时，请务必在代码块前后各留一个空行，否则将无法正确格式化为代码。
您是否也在其他浏览器中尝试过您的示例？它在 Firefox 和 Chrome 中看起来是一样的。
这是一个关于输入代码的非常有用的提示 - 我确实很努力地解决了它@JamesMontagne。
我在 IE 中尝试过 - 结果更糟@EricDahlstrom

标签： javascript svg

【解决方案1】：

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

以下应该做你想要的：

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)"，您将能够确切地看到正在发生的事情。

【讨论】：

1) 我觉得我写的问题不是很好。现在的主要问题是让随机化按钮起作用。我会更好地写问题并再次发布。 2）我看过没有旋转的图案，就像你建议的那样。这是相同的切断效果。我试图扩大 SVG 区域 x 和 y 但没有结果。我什至试图对元素设置宽度和高度限制 - 仍然切断。 @保罗
从图案区域边缘绘制的任何东西都不会出现在图案中。您正在从该区域的顶部绘制部分花朵。把花往下移就好了。
你的意思是让花瓣变短？在这种情况下，对角线和花朵变得不对称，就好像花朵刚好卡在线条的顶部 - 不在线条之间。
缩短它们，或将它们向下移动。只是不要在图案区域之外绘制。您的椭圆的长半径为 60，但它们以 40 的 Y 为中心，因此垂直方向的椭圆部分位于图案区域之外。

【解决方案2】：

1) 花瓣被切断的问题是因为我没有将它们放在 140 平方的 SVG 中间：cx 和 cy 应该是 70 和 70 而不是 60 和 40 2)不同的模式单元在SVG中是不可能的

【讨论】：