Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 208: Fix scaling and position of symbols

Browse source
This commit is contained in:
Eric Nguyen 2022-10-04 09:25:03 +00:00
parent 32684a725b
commit ec7ee7891e
6 changed files with 38 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/Components/SVG/Elements/Symbol.tsx
View file

@ -1,7 +1,7 @@
import { Interweave } from 'interweave';
import * as React from 'react';
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { DIMENSION_MARGIN } from '../../../utils/default';
import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default';
interface ISymbolProps {
model: ISymbolModel
@ -30,8 +30,14 @@ export function Symbol(props: ISymbolProps): JSX.Element {
return (
<image
href={href}
preserveAspectRatio="none"
style={{
fill: 'none',
transform: `scale(${1 / props.scale}) translateX(-50%) translateY(-50%)`,
transformBox: 'fill-box'
}}
x={props.model.x}
y={-DIMENSION_MARGIN / props.scale}
y={-SYMBOL_MARGIN / props.scale}
height={props.model.height}
width={props.model.width} />
);