如何分割svg矩形？

Question

这应该对你有用。

首先：你在函数 ghost() 中有一个变量 ghost，所以当函数第一次运行时，ghost 变量被设置，因此函数 ghost() 不再作为函数有效，所以将 var ghost 更改为 var ghos 其次：你需要清除在函数 ghost() 中重绘画布之前，再次获取变量 x 和 y

        var canvas = document.getElementById("canvas");

        var contexte = canvas.getContext("2d");

        function ghost(){

            var x = 32 +(Math.random() * (400-64));

            var y = 32 +(Math.random() * (400-64));

            ghos= new Image();

            ghos.src = "icon.png";

            ghos.onload = function(){

            // Store the current transformation matrix of canvas

            contexte.save();

            // Use the identity matrix while clearing the canvas

            contexte.setTransform(1, 0, 0, 1, 0, 0);

            contexte.clearRect(0, 0, canvas.width, canvas.height);

            // Restore the transform

            contexte.restore();

            contexte.drawImage(ghos,x,y,20,20)

            canvas.rem

        }};

        function dessiner(){

            ghost();

        }

但我正在尝试创建这样的：

我遵循了本教程：

https://www.w3schools.com/graphics/svg_rect.asp

这是我试图解决的另一个文件，但我没有得到任何帮助：

https://www.w3.org/TR/SVG/painting.html#FillRuleProperty

其他教程：

https://flaviocopes.com/svg/#path

Answer 1

如果在每个过渡点使用多个停止点来创建即时过渡，则可以使用 linearGradient 来显示多种颜色。<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 300 300">&nbsp; &nbsp; <defs>&nbsp; &nbsp; &nbsp; <linearGradient id="MyGradient" x2="0%" y2="100%">&nbsp; &nbsp; &nbsp; &nbsp; <stop offset="50%" stop-color="green" />&nbsp; &nbsp; &nbsp; &nbsp; <stop offset="50%" stop-color="white" />&nbsp; &nbsp; &nbsp; </linearGradient>&nbsp; &nbsp; </defs><rect x="29" y="239" width="200" height="80" r="8" rx="8" ry="8" fill="url(#MyGradient)" stroke="#337ab7" style="cursor: pointer;" stroke-width="1" transform="matrix(1,0,0,1,0,-120)"></rect><text style="text-anchor: middle; font: 13px 'Arial' cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px &quot;Arial&quot;" fill="#ffffff" font-size="13px" transform="matrix(1,0,0,1,0,-140)"><tspan dy="4.5">one</tspan></text><text style="text-anchor: middle; font: 13px 'Arial' cursor: pointer;" x="129" y="279" text-anchor="middle" font="10px &quot;Arial&quot;" fill="black" font-size="13px" transform="matrix(1,0,0,1,0,-100)"><tspan dy="4.5">one</tspan></text></svg>