CODEWITHSUNDEEP
reactjssvg
Davtho1983
Davtho1983

Reputation: 3954

Can't scale SVG in React

I have an SVG in a React functional component:

import React from 'react';

function mySVG({ colour, width, height, scale }) {
    const scaleFactor = 'scale:(' + { scale } + ')';

    return (
        <svg width={width} height={height}>
            >
            <g transform={scaleFactor}>
               <path d="M150 0 L75 200 L225 200 Z" 
                    fill={colour}
                    stroke={colour}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                />
            </g>
        </svg>
    );
}

export default mySVG;

How come this is not scaling with according to the scale prop?

Upvotes: 0

Views: 164

Answers (2)

ROOT
ROOT

Reputation: 11622

The problem is in your syntax, it should be without : in 'scale(' + { scale } + ')';

import React from 'react';

function mySVG({ colour, width, height, scale }) {
    const scaleFactor = 'scale(' + { scale } + ')';

    return (
        <svg width={width} height={height}>
            <g transform={scaleFactor}>
               <path d="M150 0 L75 200 L225 200 Z" 
                    fill={colour}
                    stroke={colour}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                />
            </g>
        </svg>
    );
}

export default mySVG;

I added codesandbox for it : https://codesandbox.io/s/winter-architecture-uw45f

Upvotes: 1

Dane Stevens
Dane Stevens

Reputation: 535

Your component is named mySVG React Components must be uppercased, ie. MySVG.

Upvotes: 0

Related Questions