Question

我有一个小svg小部件，其目的是显示一个角度列表（见图）。

现在，角度是线条元素，只有笔划而没有填充。但现在我想要一个“内部填充”颜色和围绕它的“笔划/边框”。我猜测线元素无法处理，所以我应该使用什么呢？

请注意，线条笔划的line-endcap是圆角的。我想在解决方案中保持这种效果。

Angle Line

<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg">
  <g>
    <g>
      <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/>
      <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/>
      <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/>
    </g>
    <g class="lsNorthAngleHandsContainer">
      <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
      <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
        348
      </text>
    </g>
  </g>
</svg>

Answer 1

添加第二行，坐标相同但线宽更细：

<g class="lsNorthAngleHandsContainer">
  <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
  <line data-angle="348" stroke="yellow" stroke-linecap="round" stroke-width="0.025" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>

Answer 2

看起来你的线是不透明的，所以你可以在粗线的顶部用“外部”颜色绘制一条带有“内部”颜色的细线。

Answer 3

您可以使用带圆角的矩形，但数学会稍微改变一下：

  <rect data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.02" fill="#FF0" transform="rotate(348, 0, 0)" x="-0.02"  y="-0.4" width=".06" height=".4" rx=".03" ry=".03"/>

http://jsfiddle.net/RNAuP/

Answer 4

我发现了illustration启发的关于filling and stroking的W3C文章的优雅解决方案。基本上，您将路径移动到定义并使用此定义绘制两个元素：

  //import java.util.*;
 public class Print{
 public static void main (String[]args){
 Vehicle vh = new Vehicle(30,"vauxhall",43434);
 Bicycle b = new Bicycle(6,"yty",6,5);
 //Van v = new Van(6,"yty",6,5,12);
 //System.out.println("check me ");
 //Van v = new Van (50);
 //v.setMaxSpeed(20);
 //v.setStorageCapacity(12);
 //vh.setMaxSpeed(10);
 //b.setMultipleGeers(5);
  }
}
 class Vehicle
 {
   private int maxSpeed;
   private String make;
   private double regNumber; 
  // private int multipleGeers;
  //public Vehicle(){}
  public Vehicle(int maxSpeed, String make,
  double regNumber)
  {
    this.maxSpeed= maxSpeed;
    this.make = make;
    this.regNumber = regNumber;
  }
  public void setMaxSpeed(int maxSpeed){
   if (maxSpeed>0)
    {
        this.maxSpeed = maxSpeed;
    }
    else{ System.out.println("invalid speed");
    }
  }    
   public  int getMaxSpeed(){         
    return maxSpeed;
   }
    public void setMake(String make){
      this. make=  make;             
   }     
   public  String getMake(){
      return  make;
   }
    public void setRegNumber(double regNumber){
      this.regNumber = regNumber;             
   }   
    public  double getRegNumber(){               
    return regNumber;
   } 
 }

   class Bicycle extends Vehicle
{   
   private int multipleGeers; 
  public Bicycle( int maxSpeed,String make,double 
     regNumber,int multipleGeers)

   {
    super(maxSpeed,make,regNumber);      
    this.multipleGeers = multipleGeers;
   }


    public void setMultipleGeers(int multipleGeers){
       this.multipleGeers = multipleGeers;             
    }
    public int getMultipleGeers(){
        return multipleGeers;
   }
    @Override
     public void setMaxSpeed(int maxSpeed){
     if(maxSpeed <0 && maxSpeed>40){
      System.out.println("value not allowed");
      }
    else{
     super.setMaxSpeed(maxSpeed);
       }
   }
     }

    class Van extends Vehicle
   {    
    private int storageCapacity;
   //public Van(){}
   public Van(int maxSpeed, String make, double regNumber,int multipleGeers ,int storageCapacity
)
{
    super(maxSpeed, make, regNumber, multipleGeers);
    //super(maxSpeed,make,regNumber);
    this.storageCapcity = storageCapacity;
}
public void setStorageCapacity(int storageCapacity){
    this.storageCapacity = storageCapacity;             
 } 
public int getStorageCapacity(){
    return storageCapacity;
}
}

通过使用<svg width="200" height="200" viewBox="0 0 100 100"> <defs> <line id="line1" x1="25" x2="75" y1="25" y2="75"/> </defs> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="stroke"></use> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="line"></use> </svg>和<defs>，您只能更改路径元素以更新两行。 JSFiddle演示

Answer 5

你也可以用路径来做，即使它在圆形位周围很棘手：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
  <!-- I often use entities to be able to change lot of numbers at once in static SVG, also kind of makes the paths more readable.
       Obvisouly, if you're generating the path you can use the same variables in code to append to d -->
  <!ENTITY handFill "0.01">
  <!ENTITY handFill2 "0.02"><!-- Should be 2 * handFill to be centered -->
  <!ENTITY handStroke "0.005"><!-- Should be less than handFill2 to not hide fill -->
]>
<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg">
  <g>
    <g>
      <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/>
      <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/>
      <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/>
    </g>
    <g class="lsNorthAngleHandsContainer">
      <path d="
        M -&handFill;,0 l0,-0.4
        a &handFill;,&handFill; 0 0,1 &handFill2;,0
        l 0,0.4
        a &handFill;,&handFill; 0 0,1 -&handFill2;,0
      " stroke="red" stroke-linecap="round" stroke-width="&handStroke;" fill="yellow" transform="rotate(348)" />
      <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
        348
      </text>
    </g>
  </g>
</svg>

如何制作一个带有边框的SVG“线”？

5 个答案: