如何在SVG中为椭圆元素添加轮廓/边框?

时间:2012-10-05 01:31:26

标签: javascript jquery svg vector-graphics jquery-svg

我是SVG的新手。我想知道我可以用什么属性在SVG代码中为椭圆元素添加轮廓/边框? 实际上,我正在尝试使用SVG和jQuery创建交互式图形,因此我需要让某些选定的椭圆元素在事件发生时显示特定颜色(如深红色)的实线轮廓。我想知道如何做到这一点。

谢谢!

2 个答案:

答案 0 :(得分:2)

你的意思是这样吗?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100%" height="100%">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  fill="yellow" stroke="purple" stroke-width="2"/>
</svg> 

椭圆的边缘为紫色。或者你的意思是围绕椭圆形的方框,你需要像这样单独做?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100%" height="100%">
  <ellipse cx="300" cy="80" rx="100" ry="50" fill="yellow"/>
  <rect x="200" y="30" width="200" height="100"
   fill="none" stroke="purple" stroke-width="2"/>
</svg> 

答案 1 :(得分:0)

在CSS 中,类似于:

path {
  fill: none;;
  stroke: #646464;
  stroke-width:1px
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}