Use <path> instead of <line>

diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb
index 21b7c91adacfdd8bb46829806f76770759952e89..a40fa7086fdf0d1db0a752b99896f8e71f63e7b4 100644 (file)
--- a/app/helpers/svg_helper.rb
+++ b/app/helpers/svg_helper.rb
@@ -14,15 +14,17 @@ module SvgHelper
     svg_attrs = options.slice("width", "height", "opacity", :class)
 
     tag.svg(**svg_attrs) do
+      horizontal = "H#{options['width']}"
       concat tag.rect(**rect_attrs, **stroke_attrs(options, "border")) if options["fill"] || options["border"]
-      concat tag.line(:x2 => "100%", :y1 => "50%", :y2 => "50%", **stroke_attrs(options, "line")) if options["line"]
+      if options["line"]
+        y_middle = format("%g", 0.5 * options["height"])
+        concat tag.path(:d => "M0,#{y_middle} #{horizontal}", **stroke_attrs(options, "line"))
+      end
       if options["casing"]
         casing_width = options["casing-width"] || 1
-        y_top = 0.5 * casing_width
-        y_bottom = options["height"] - (0.5 * casing_width)
-        concat tag.g(tag.line(:x2 => "100%", :y1 => y_top, :y2 => y_top) +
-                     tag.line(:x2 => "100%", :y1 => y_bottom, :y2 => y_bottom),
-                     **stroke_attrs(options, "casing"))
+        y_top = format("%g", 0.5 * casing_width)
+        y_bottom = format("%g", options["height"] - (0.5 * casing_width))
+        concat tag.path(:d => "M0,#{y_top} #{horizontal} M0,#{y_bottom} #{horizontal}", **stroke_attrs(options, "casing"))
       end
     end
   end

diff --git a/test/helpers/svg_helper_test.rb b/test/helpers/svg_helper_test.rb
index 14c08539ca1f3d22a1728ecffbbe3b2cf42ed1da..25a9e4568c33a30ce7946e648b05d08b14a3fbcc 100644 (file)
--- a/test/helpers/svg_helper_test.rb
+++ b/test/helpers/svg_helper_test.rb
@@ -52,20 +52,30 @@ class SvgHelperTest < ActionView::TestCase
   end
 
   def test_key_line
-    svg = key_svg_tag("width" => 80, "height" => 20, "line" => "blue")
+    svg = key_svg_tag("width" => 80, "height" => 15, "line" => "blue")
     expected = <<~HTML.gsub(/\n\s*/, "")
-      <svg width="80" height="20">
-        <line x2="100%" y1="50%" y2="50%" stroke="blue" />
+      <svg width="80" height="15">
+        <path d="M0,7.5 H80" stroke="blue" />
       </svg>
     HTML
     assert_dom_equal expected, svg
   end
 
   def test_key_line_width
-    svg = key_svg_tag("width" => 80, "height" => 20, "line" => "blue", "line-width" => 3)
+    svg = key_svg_tag("width" => 80, "height" => 15, "line" => "blue", "line-width" => 3)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="80" height="15">
+        <path d="M0,7.5 H80" stroke="blue" stroke-width="3" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_line_with_integer_coords
+    svg = key_svg_tag("width" => 80, "height" => 20, "line" => "blue")
     expected = <<~HTML.gsub(/\n\s*/, "")
       <svg width="80" height="20">
-        <line x2="100%" y1="50%" y2="50%" stroke="blue" stroke-width="3" />
+        <path d="M0,10 H80" stroke="blue" />
       </svg>
     HTML
     assert_dom_equal expected, svg
@@ -75,10 +85,7 @@ class SvgHelperTest < ActionView::TestCase
     svg = key_svg_tag("width" => 80, "height" => 20, "casing" => "yellow")
     expected = <<~HTML.gsub(/\n\s*/, "")
       <svg width="80" height="20">
-        <g stroke="yellow">
-          <line x2="100%" y1="0.5" y2="0.5" />
-          <line x2="100%" y1="19.5" y2="19.5" />
-        </g>
+        <path d="M0,0.5 H80 M0,19.5 H80" stroke="yellow" />
       </svg>
     HTML
     assert_dom_equal expected, svg
@@ -88,10 +95,17 @@ class SvgHelperTest < ActionView::TestCase
     svg = key_svg_tag("width" => 80, "height" => 20, "casing" => "yellow", "casing-width" => 5)
     expected = <<~HTML.gsub(/\n\s*/, "")
       <svg width="80" height="20">
-        <g stroke="yellow" stroke-width="5">
-          <line x2="100%" y1="2.5" y2="2.5" />
-          <line x2="100%" y1="17.5" y2="17.5" />
-        </g>
+        <path d="M0,2.5 H80 M0,17.5 H80" stroke="yellow" stroke-width="5" />
+      </svg>
+    HTML
+    assert_dom_equal expected, svg
+  end
+
+  def test_key_casing_with_integer_coords
+    svg = key_svg_tag("width" => 80, "height" => 20, "casing" => "yellow", "casing-width" => 2)
+    expected = <<~HTML.gsub(/\n\s*/, "")
+      <svg width="80" height="20">
+        <path d="M0,1 H80 M0,19 H80" stroke="yellow" stroke-width="2" />
       </svg>
     HTML
     assert_dom_equal expected, svg