SVG Points via String Interpolation

points = (0..5).map{ [rand(100)-50,rand(100)-50] }

puts <<ENDSVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
#{points.map{ |x,y| "<circle cx= #{x}  cy= #{y}  r= 3  />" }.join("
")}
</svg>
ENDSVG

Output: http://jsfiddle.net/xwnVY/

如果你想比扼制干涉更有条理:

SVG Points Using Nokogiri XML Builder

require  nokogiri  # gem install nokogiri
b = Nokogiri::XML::Builder.new do |doc|
  doc.svg xmlns:"http://www.w3.org/2000/svg", viewBox:"-100 -100 200 200" do
    points.each do |x,y|
      doc.circle r:3, cx:x, cy:y
    end
  end
end
puts b.to_xml

将产出作为“foo.svg”加以删除,并在现代网络浏览器上开放。

Drawing Rects

引人注意:

<rect transform="rotate(45)" x="0" y="0" width="100" height="200" />
<polygon points="0,0 100,0 100,100 0,100" />
<path d="M0,0 L100,0 100,100 0,100 Z" />

如果你想要把不偏重变化的武断点连接起来,多角可能是最容易生产的。请注意,虽然I ve以<代码>x,y x,y格式显示上述坐标,但若便于您的代码生成,SVG还将接受<代码>x、y、x、y或x y x y x。

A Bit of Formatting

如果你想要提纲而不是填表,你可以在特别志愿人员小组中添加这一特别安全部分:

<style>
  rect, polygon, path { fill:none; stroke:black; stroke-width:1px }
</style>

Using Haml for the XML

Finally, Haml is another option that you might consider for making your XML without an SVG-specific library:

@points = (0..7).map{ [rand(100)-50,rand(100)-50] }

require  haml 
puts Haml::Engine.new(<<ENDHAML).render(self)
%svg(xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200")
  :css
    circle { fill:orange }
    rect, polygon, path {
      fill:none; stroke:black;
      vector-effect:non-scaling-stroke
    }
  - @points.each_slice(4) do |rect|
    %polygon{ points:rect.join(" ") }
  - @points.each do |x,y|
    %circle{r:3, cx:x, cy:y}
ENDHAML

Output: http://jsfiddle.net/xwnVY/4/

Answer 2

也许你可以尝试特别学校。便于创建(解释XML)、开放式、跨平台,你可以开张,使用因子替罪scape。