Question

这里（不）正是我想要的：

http://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>

Answer 1

尝试绘制路径弧而不是圆圈

enter image description here

您可以使用圆弧的起始位置和结束位置来完成所需的“削减”。

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

function regularArcData(cx,cy,radius,startDegrees,endDegrees,isCounterClockwise){

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

    arcData+="M"+space+startX         +space
                      +startY         +space;
    arcData+="A"+space+radius         +space
                      +radius         +space
                      +offsetRadians  +space
                      +largeArc       +space
                      +sweepFlag      +space
                      +endX           +space
                      +endY;
    return(arcData);
}

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

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
</style>

<script>
    $(function(){

        var svgns="http://www.w3.org/2000/svg";

        var svg=document.createElementNS(svgns,"svg");
        svg.setAttribute('width', '600px');
        svg.setAttribute('height', '600px');
        document.body.appendChild(svg);

        var cx=150;
        var cy=150;

        addPath(svg,"arc1","transparent","red",  15,regularArcData(cx,cy,50,0,135,false));
        addPath(svg,"arc2","transparent","green",15,regularArcData(cx,cy,65+2,0,180,false));
        addPath(svg,"arc3","transparent","blue", 15,regularArcData(cx,cy,80+4,0,215,false));
        addPath(svg,"arc4","transparent","orange", 15,regularArcData(cx,cy,95+6,0,250,false));
        addPath(svg,"arc5","transparent","purple", 15,regularArcData(cx,cy,110+8,0,270,false));


        function addPath(theSvg,id,fill,stroke,strokeWidth,data){
            var path=document.createElementNS(svgns,"path");
            path.setAttribute("id",id);
            path.setAttribute("fill",fill);
            path.setAttribute("stroke",stroke);
            path.setAttribute("stroke-width",strokeWidth);
            path.setAttribute("d",data);
            theSvg.appendChild(path);

            var pathSvg=""
            pathSvg+="\n"
                      +"<path id='"+id
                      +"' fill='"+fill
                      +"' stroke='"+stroke
                      +"' stroke-width='"+strokeWidth
                      +"' d='"+data+"'/>";
             $("#paths").text($("#paths").text()+pathSvg);
        }


        function regularArcData(cx,cy,radius,startDegrees,endDegrees,isCounterClockwise){

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

            arcData+="M"+space+startX         +space
                              +startY         +space;
            arcData+="A"+space+radius         +space
                              +radius         +space
                              +offsetRadians  +space
                              +largeArc       +space
                              +sweepFlag      +space
                              +endX           +space
                              +endY;
            return(arcData);
        }


    }); // end $(function(){});
</script>

</head>

<body>
    <textarea id="paths" cols=130 rows=7>Paths</textarea><br/>
</body>
</html>

Answer 2

我不是svg的专家，但我认为你可以使用剪辑来做到这一点。 Semi-Circle http://jsfiddle.net/XpJEQ/7/

<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg viewBox = "0 0 1100 400" version = "1.1">
        <defs>
            <circle id = "r2" cx = "200" cy = "50" r = "100" stroke = "black" stroke-width = "5"/>
            <circle id = "r3" cx = "-30" cy = "130" r = "100" stroke = "black" stroke-width = "5"/>

            <clipPath id = "clip1">
                <path d = "M 0 0 L 550 200 L 1100 0"/>
            </clipPath>
        </defs>
        <g clip-path = "url(#clip1)">
            <use x = "250" y = "0" xlink:href = "#r1" fill = "url(#g1)"/>
            <use x = "350" y = "150" xlink:href = "#r2" fill = "url(#g1)"/>
            <use x = "580" y = "50" xlink:href = "#r3" fill = "url(#g1)"/>
        </g>
    </svg>

有关更多剪辑详细信息，请同时检查clipping and masking

SVG - 如何用cuted元素绘制描边圆？

2 个答案: