A semantic mistake in SVG `Transform `Rotate attribute
Nobody has claimed this yet.
- Dominant language
- OCaml
- Stars
- 179
- Forks
- 63
- Avg merge
- 5h
- Merged PRs (30d)
- 22
Description
According to the documentation ( https://ocsigen.org/tyxml/4.3.0/api/Svg_types ), Transform attribute has `Rotate data type
`Rotate of Unit.angle * (float * float) option
with Unit.angle being
type angle = [
Deg |Grad | `Rad ] quantity
According to this logic, the following code should produce a vertical label
let yaxis_label ~size ~margin ~yaxis_text =
let yaxis_text = yaxis_text
in let xcoord = margin.left /. 3.
in let ycoord = size.height_p /. 2.
in Svg.D.[
text
~a:
[ a_x_list [xcoord, SomePx] ; a_y_list [ycoord, SomePx]
; a_text_anchorMiddle ; a_dominant_baselineMiddle
; a_fill (Color ("black", None)) ; a_font_size "16" ; a_transform [Rotate ( (270., Some `Deg), Some (xcoord, ycoord) ) ] *)
]
[txt yaxis_text]
]
however, it produces a horizontal label. In Chrome Development tools it looks like
text class="caml_r" transform="rotate(270deg 30 200)" font-size="16" fill="black" dominant-baseline="middle" text-anchor="middle" y="200px" x="30px" data-eliom-id="EhX9pFflUqF9"
Birth rate
/text
while changing "270deg" to "270" (see below) makes the label vertical.
text class="caml_r" transform="rotate(270 30 200)" font-size="16" fill="black" dominant-baseline="middle" text-anchor="middle" y="200px" x="30px" data-eliom-id="EhX9pFflUqF9"
Birth rate
/text
According to my understanding of the following pages ( https://stackoverflow.com/questions/35584286/svg-transform-origin-not-working-in-chrome ) and ( https://css-tricks.com/transforms-on-svg-elements/ ), I changed the code moving the rotation above the text element as shown in the code below. It works.
let yaxis_label ~size ~margin ~yaxis_text =
let yaxis_text = yaxis_text
in let xcoord = margin.left /. 3.
in let ycoord = size.height_p /. 2.
in Svg.D.[
g
~a:
[ a_style (
Printf.sprintf
"transform: rotate(270deg); transform-origin: %spx %spx;"
(string_of_int (int_of_float xcoord) )
(string_of_int (int_of_float ycoord) )
)
]
[text
~a:
[ a_x_list [xcoord, SomePx] ; a_y_list [ycoord, SomePx]
; a_text_anchorMiddle ; a_dominant_baselineMiddle
; a_fill (Color ("black", None)) ; a_font_size "16" (* ; a_transform [Rotate ( (270., Some `Deg), Some (xcoord, ycoord) ) ] *)
]
[txt yaxis_text] ]
]
However, it seems to me a semantic mistake was made, the current implementation uses (float, Some `Deg), which belongs to CSS attributes, while it should use float or a similar data type.
Horizontal label (wrong)

Vertical label (right)

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Review the Svg_types documentation for Transform and Rotate, then compare the reported OCaml value with the generated SVG transform attribute shown in the issue. Reproduce the example in a browser and determine whether the angle unit is serialized correctly; done means rotation behaves as intended without requiring the CSS workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ocaml
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100