Question: Does SVG only have height and width arguments? about react-native-svg HOT 10 CLOSED

Can I create SVG elements without specifying width and height? The size of the parent view will depend on the content of the child view.

from react-native-svg.

style, opacity,viewbox and preserveAspectRatio

Svg element is based on ART`s Surface element

from react-native-svg.

Is it possible to get the dimensions of the SVG? I want my element for ex: Circle, to be relative to the size of the SVG container

from react-native-svg.

You can set with and height of Svg by using variables.

let height = 100;
let width = 100;

<Svg height={height} width={width}>
    <Circle x={width * 0.1} y={height * 0.2} r={width * 0.5} />
</Svg>

from react-native-svg.

I see, but is there a way to make the height and width of the svg flexible?

from react-native-svg.

@ajoshdee For some reason my Svg component doesn't respond to a changing width / height value when using the onLayout prop of a parent View to update the width / height dynamically. But the inner components (i.e. the Circle in your example) will respond to those layout changes.

So what I did was to use this:

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var SCREEN_HEIGHT = require('Dimensions').get('window').height;

Those values will give you ample space for the SVG container.
Now the inner elements can just be scaled according to your View layout.

I hope that makes some sense...

from react-native-svg.

After 2.0.0 you can use flex layout on Svg element.
And other props owned by View elements.

from react-native-svg.

@magicismight any ETA on 2.0.0?

from react-native-svg.

I tried not setting width or height and got error "width and height must be > 0"at Bitmap.java:969.

from react-native-svg.

Ended up here having the same problem (width/ height taken through state from onLayout results in not working).

I did the following:

    const {width, height } = this.state
[...]
    <Svg style={{position: 'absolute'}} 
        width={width} height={height}
        viewBox={`0 0 ${width} ${height}`}
    >

It works without position: absolute, but that how I use it.

from react-native-svg.