如何使用 SVG 绘制正弦波图案

Question

我正在尝试转变以下模式...

...变成完美的正弦波模式。我应该使用哪些控制点（我如何计算它们？）？我还必须使图案更宽吗？

上面是如何生成的：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
    <defs>
        <!-- Geometry -->
        <g>
            <rect id="square" x="0" y="0" width="200" height="200" />
        </g>

        <!-- Patterns -->
        <pattern id="wave" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M 0 7.5 Q 2.5 7.5 2.5 5 Q 2.5 2.5 5 2.5 Q 7.5 2.5 7.5 5 Q 7.5 7.5 10 7.5"  stroke="black" fill="transparent" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" />
        </pattern>
    </defs>

    <!-- Graphics -->
    <use xlink:href="#square" transform="translate(000, 000)" fill="url(#wave)"/>
</svg>

演示在这里：http://jsfiddle.net/uEULF/

感谢您的帮助。

Answer 1

在此答案中使用 Asad 的示例：How to draw sine waves with SVG (+JS)?

这里是演示：http://jsfiddle.net/HyTad/

var svg = document.getElementById('sine_wave').children[0];
var origin = { //origin of axes
    x: 100,
    y: 100
};
var amplitude = 10; // wave amplitude
var rarity = 1; // point spacing
var freq = 0.1; // angular frequency
var phase = 20; // phase angle

for (var i = -100; i < 1000; i++) {


    var line = document.createElementNS("http://www.w3.org/2000/svg", "line");

    line.setAttribute('x1', (i - 1) * rarity + origin.x);
    line.setAttribute('y1', Math.sin(freq * (i - 1 + phase)) * amplitude + origin.y);


    line.setAttribute('x2', i * rarity + origin.x);
    line.setAttribute('y2', Math.sin(freq * (i + phase)) * amplitude + origin.y);

    line.setAttribute('style', "stroke:black;stroke-width:1");

    svg.appendChild(line);
}