Pregunta

I recently started working with Google Dart (www.dartlang.org) and playing with SVG. I am trying to scale a generated SVG to fit into a <div> using a viewBox.

People on StackOverflow already gave me a lot of help.
I am now able to scale paths like this: Dart create and transform an SVG path

But is seems that viewBox is made for scale-to-fit and using it would save me from scaling all paths in the svg separately. That is why I want to use a viewBox.
I tried the following:

    // get bounding box of the created svg
    Rect bb = path.getBBox();

    // create a viewBox for the svg to fit in the div
    var viewBox = svg.viewBox.baseVal
    ..x = bb.x
    ..y = bb.y
    ..width = bb.width
    ..height = bb.height;

    // center the image inside the div
    svg.preserveAspectRatio.baseVal
    ..meetOrSlice = PreserveAspectRatio.SVG_MEETORSLICE_MEET
    ..align = PreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;

But no scaling happens. How would I solve this?

¿Fue útil?

Solución

While writing this question and retrying to make sure I tried anything before asking here, I found the following solution.

It seems like Dartium (Chrome with a native Dart VM) has a bug (issue 12224) where changes to the viewBox are not reflected directly.

Adding the following code after changes to the viewBox forces Dartium to somehow resize to the requested size:

    // add an empty ```<g>``` element to force svg resize
    SvgElement g = new SvgElement.tag('g');
    svg.append(g);
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top