Use <path> instead of <line>
This commit is contained in:
parent
b13ac4ec21
commit
cda8ca0607
2 changed files with 35 additions and 19 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue