如何使用画布和svg绘制圆形矩形？

问题描述：

我想使用画布和svg绘制圆形矩形，并且当我将鼠标悬停在上面时，我想更改矩形的颜色。是否有可能使用帆布& svg？我想要这样的东西。以下是我的链接： - https://fxfactory.com/downloads/docs/noiseindustries/fxfactorypro/Thumbnails/Rounded%20Rectangle.jpg 如何使用画布和svg绘制圆形矩形？

Context.strokeRect做它没有SVG – markE

答

SVG（可缩放矢量图形）和HTML Canvas是两种独立的技术。 SVG是一种基于XML和可写的HTML代码中的一组特定的标签：

<svg width="400" height="110"> 
    <rect width="300" height="100" style="fill:rgb(128,128,255);stroke-width:3;stroke:rgb(0,0,255)" /> 
</svg>

HTML Canvas是只是用JavaScript创建的图形画布：

<canvas id="myCanvas" width="200" height="100" 
style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 

<script> 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(0,0,150,75); 
</script>

这是动作： http://codepen.io/1GR3/pen/ZpaPJR

但是你可以在画布上绘制SVG和SVG的追加画布（请注意，你可以不追加到画上一个SVG画布上绘制一个画布，以下？） – Kaiido

哦，男人，太多的递归！ O_0 – 1GR3

答

这在SVG中很容易实现。

.myrect { 
 
    fill: red; 
 
} 
 

 
.myrect:hover { 
 
    fill: green; 
 
}

<svg width="300" height="200"> 
 
    <rect class="myrect" x="10" y="10" width="280" height="180" rx="40" ry="40"/> 
 
</svg>

如何使用画布和svg绘制圆形矩形？

相关推荐