Describe the bug
Basically, svg symbols such as for "Sun" and "Mercury" are imperfectly sized and positioned. When symbols are rendered in sequence across or vertically they do not line up. The positions are "close enough" so as to not-be-noticed when arranged on the chart, but they are not perfect. The different x and y "shift" values used by the symbols seem kind of arbitrary and the rounding operations applied to them will behave differently depending upon negative or positive number.
|
venus(x: number, y: number): Element { |
|
// center symbol |
|
const xShift = 2 // px |
|
const yShift = 7 // px |
|
x = Math.round(x + (xShift * this.settings.SYMBOL_SCALE)) |
|
y = Math.round(y + (yShift * this.settings.SYMBOL_SCALE)) |
|
|
|
const wrapper = document.createElementNS(this.context.root.namespaceURI, 'g') |
|
wrapper.setAttribute('transform', 'translate(' + (-x * (this.settings.SYMBOL_SCALE - 1)) + ',' + (-y * (this.settings.SYMBOL_SCALE - 1)) + ') scale(' + this.settings.SYMBOL_SCALE + ')') |
|
|
|
const node = document.createElementNS(this.context.root.namespaceURI, 'path') |
|
node.setAttribute('d', 'm' + x + ', ' + y + ' -4.937669,0.03973 m 2.448972,2.364607 0,-5.79014 c -3.109546,-0.0085 -5.624617,-2.534212 -5.620187,-5.64208 0.0044,-3.107706 2.526514,-5.621689 5.635582,-5.621689 3.109068,0 5.631152,2.513983 5.635582,5.621689 0.0044,3.107868 -2.510641,5.633586 -5.620187,5.64208') |
|
node.setAttribute('stroke', this.settings.POINTS_COLOR) |
|
node.setAttribute('stroke-width', this.settings.POINTS_STROKE.toString()) |
|
node.setAttribute('fill', 'none') |
|
wrapper.appendChild(node) |
|
|
|
return wrapper |
|
} |
No clear steps to reproduce, due to several local modifications to enable exploring and tweaking this area.
If one does build a demo that arranges the icons in a grid, the alignment issues will be seen.
Possibly, if symbols are constructed so that translation and scale are applied to outer-most symbol only, without shift values, the positioning will be more precise
Describe the bug
Basically, svg symbols such as for "Sun" and "Mercury" are imperfectly sized and positioned. When symbols are rendered in sequence across or vertically they do not line up. The positions are "close enough" so as to not-be-noticed when arranged on the chart, but they are not perfect. The different x and y "shift" values used by the symbols seem kind of arbitrary and the rounding operations applied to them will behave differently depending upon negative or positive number.
AstroChart/project/src/svg.ts
Lines 312 to 330 in d8fb56f
No clear steps to reproduce, due to several local modifications to enable exploring and tweaking this area.
If one does build a demo that arranges the icons in a grid, the alignment issues will be seen.
Possibly, if symbols are constructed so that translation and scale are applied to outer-most symbol only, without shift values, the positioning will be more precise