SVG - 如何用可爱的元素绘制描边圆？

Question

SVG - 如何用可爱的元素绘制描边圆？

这（不）正是我想要得到的：

https://i.stack.imgur.com/nMbtl.png

我的代码：

           <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
                <circle class="circle_shadow" cx="50%" cy="50%" r="6.6%" fill="#333333" />
                <circle class="circle_shadow" cx="50%" cy="50%" r="11%" fill="none" stroke="#333333" stroke-width="7%" />
                <circle class="circle_shadow" cx="50%" cy="50%" r="19%" fill="none" stroke="#333333" stroke-width="7%" />
                <circle class="circle_shadow" cx="50%" cy="50%" r="27%" fill="none" stroke="#333333" stroke-width="7%" />
                <circle class="circle_shadow" cx="50%" cy="50%" r="35%" fill="none" stroke="#333333" stroke-width="7%" />
            </svg>

Run Code Online (Sandbox Code Playgroud)

Answer 1

mar*_*rkE 5

尝试绘制路径弧而不是圆

\n\n

在此输入图像描述

\n\n

您可以使用圆弧的起始位置和结束位置来完成所需的 \xe2\x80\x9ccuts\xe2\x80\x9d 。

\n\n

这是一个 javascript 辅助函数，可生成同心弧的路径数据。

\n\n

function regularArcData(cx,cy,radius,startDegrees,endDegrees,isCounterClockwise){\n\n    var offsetRadians=0;  // -Math.PI/2 for 12 o\'clock\n    var sweepFlag=(isCounterClockwise)?0:1;\n    var startRadians=offsetRadians+startDegrees*Math.PI/180;\n    var endRadians=offsetRadians+endDegrees*Math.PI/180;\n    var largeArc=( (endRadians-startRadians) % (2*Math.PI) ) > Math.PI ? 1 : 0;\n    var startX=parseInt(cx+radius*Math.cos(startRadians));\n    var startY=parseInt(cy+radius*Math.sin(startRadians));\n    var endX=  parseInt(cx+radius*Math.cos(endRadians));\n    var endY=  parseInt(cy+radius*Math.sin(endRadians));\n    var space=" ";\n    var arcData="";\n\n    arcData+="M"+space+startX         +space\n                      +startY         +space;\n    arcData+="A"+space+radius         +space\n                      +radius         +space\n                      +offsetRadians  +space\n                      +largeArc       +space\n                      +sweepFlag      +space\n                      +endX           +space\n                      +endY;\n    return(arcData);\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

这是代码和小提琴： http ://jsfiddle.net/m1erickson/VbqnW/

\n\n

<!doctype html>\n<html>\n<head>\n<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->\n<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>\n\n<style>\n    body{ background-color: ivory; }\n</style>\n\n<script>\n    $(function(){\n\n        var svgns="http://www.w3.org/2000/svg";\n\n        var svg=document.createElementNS(svgns,"svg");\n        svg.setAttribute(\'width\', \'600px\');\n        svg.setAttribute(\'height\', \'600px\');\n        document.body.appendChild(svg);\n\n        var cx=150;\n        var cy=150;\n\n        addPath(svg,"arc1","transparent","red",  15,regularArcData(cx,cy,50,0,135,false));\n        addPath(svg,"arc2","transparent","green",15,regularArcData(cx,cy,65+2,0,180,false));\n        addPath(svg,"arc3","transparent","blue", 15,regularArcData(cx,cy,80+4,0,215,false));\n        addPath(svg,"arc4","transparent","orange", 15,regularArcData(cx,cy,95+6,0,250,false));\n        addPath(svg,"arc5","transparent","purple", 15,regularArcData(cx,cy,110+8,0,270,false));\n\n\n        function addPath(theSvg,id,fill,stroke,strokeWidth,data){\n            var path=document.createElementNS(svgns,"path");\n            path.setAttribute("id",id);\n            path.setAttribute("fill",fill);\n            path.setAttribute("stroke",stroke);\n            path.setAttribute("stroke-width",strokeWidth);\n            path.setAttribute("d",data);\n            theSvg.appendChild(path);\n\n            var pathSvg=""\n            pathSvg+="\\n"\n                      +"<path id=\'"+id\n                      +"\' fill=\'"+fill\n                      +"\' stroke=\'"+stroke\n                      +"\' stroke-width=\'"+strokeWidth\n                      +"\' d=\'"+data+"\'/>";\n             $("#paths").text($("#paths").text()+pathSvg);\n        }\n\n\n        function regularArcData(cx,cy,radius,startDegrees,endDegrees,isCounterClockwise){\n\n            var offsetRadians=0;  // -Math.PI/2 for 12 o\'clock\n            var sweepFlag=(isCounterClockwise)?0:1;\n            var startRadians=offsetRadians+startDegrees*Math.PI/180;\n            var endRadians=offsetRadians+endDegrees*Math.PI/180;\n            var largeArc=( (endRadians-startRadians) % (2*Math.PI) ) > Math.PI ? 1 : 0;\n            var startX=parseInt(cx+radius*Math.cos(startRadians));\n            var startY=parseInt(cy+radius*Math.sin(startRadians));\n            var endX=  parseInt(cx+radius*Math.cos(endRadians));\n            var endY=  parseInt(cy+radius*Math.sin(endRadians));\n            var space=" ";\n            var arcData="";\n\n            arcData+="M"+space+startX         +space\n                              +startY         +space;\n            arcData+="A"+space+radius         +space\n                              +radius         +space\n                              +offsetRadians  +space\n                              +largeArc       +space\n                              +sweepFlag      +space\n                              +endX           +space\n                              +endY;\n            return(arcData);\n        }\n\n\n    }); // end $(function(){});\n</script>\n\n</head>\n\n<body>\n    <textarea id="paths" cols=130 rows=7>Paths</textarea><br/>\n</body>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	12 年，5 月前
查看次数：	3434 次
最近记录：	12 年，5 月前