3Years | wechat-shop-basic-tutorial | Chat library

There is problem you compare strings lexicographically, so 10Y < 3Y. Solution is convert values to integers.

I have not found if there is a documentation for the library. I've looked around in the source, but mainly what I can explain is the SVG part of things. Maybe there are simpler ways the engine provides itself.

transform attributes on the root svg element are legitimate, but in the context of what you want to accomplish, they are more confusing than helpfull, since there are other attributes that result in transformations, but are written in a different form.

An element provides attributes that match what you want to accomplish much more directly:

• x and y attributes on an outermost svg element are ignored.

• width and height describe the output dimensions the image is rendered into. So they should reflect the final "window" dimensions. If the SVG initially has dimensions not fitting your "window", change them.

• viewBox describes which part of the internal SVG viewport (the coordinate system of the root element) should be rendered. This not what the SVGVisualElement.Bounds struct for a selected element returns. (Values relative to the coordinate system of the element itself, but excluding all parent element transformations) I can't find any function in the library that would get you the values you need.

• preserveAspectRatio describes how the rendered part is fit into the output window. For example, XMidYMid meet, which is the default, means: Size the viewBox area with the maximum size so that it just fits into the width/height without overflowing in any direction, and position it in the center.

While I don't know how to get the needed values of the bounding box from the library, other programs deliver them without problem:

• inkscape -I MyID in the command line
• in the browser via Javascript document.getElementById("MyId").getBBox()