Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svg.viewBox changes not shown in Dartium (work in dart2js) #12224

Closed
DartBot opened this issue Aug 4, 2013 · 6 comments
Closed

svg.viewBox changes not shown in Dartium (work in dart2js) #12224

DartBot opened this issue Aug 4, 2013 · 6 comments

Comments

@DartBot
Copy link

DartBot commented Aug 4, 2013

This issue was originally filed by rzymek...@gmail.com


The following code works after compiled to js. In Dartium the graphic does not move. (Sometimes there's a single refresh after resizing Dartium window).

What is the expected output? What do you see instead?

  1. Move mouse over graphic while holding Ctrl.
    Expected: The graphic should move;
    What I see: graphic does not move

What version of the product are you using? On what operating system?
Dart Editor version 0.6.14_r25719
Dart SDK version 0.6.14.0_r25719
Linux x86_64; Ubuntu 12.04.2 LTS,
Chromium: 29.0.1547.0 (Developer Build 208345)


Attachments:
svgviewbox.dart (348 Bytes)
svgviewbox.html (3.42 KB)

@DartBot
Copy link
Author

DartBot commented Aug 4, 2013

This comment was originally written by rzyme...@gmail.com


The following code works as expected in Dartium:

import 'dart:html';

void main() {
  Element root = query("#svgroot");
  root.onMouseMove.listen((MouseEvent e) {
    if (e.ctrlKey) {
      num x = -e.client.x;
      num y = -e.client.y;
      root.attributes["viewBox"] = "${x} ${y} 450 450";
    }
  });
}

@a-siva
Copy link
Contributor

a-siva commented Sep 18, 2013

Added this to the Later milestone.

@DartBot
Copy link
Author

DartBot commented Dec 30, 2013

This comment was originally written by haaiee...@gmail.com


It seems like this bug pops up when using the SvgSvgElement.viewBox property and not when using SvgSvgElement.attributes["viewBox"].

I posted this on Stackoverflow: http://stackoverflow.com/questions/20840372

Recap of stackoverflow:
This does not work:

// 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;
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 after adding this:

// add an empty ```<g>``` element to force svg resize
SvgElement g = new SvgElement.tag('g');
svg.append(g);

It does work.

@kasperl
Copy link

kasperl commented Jul 10, 2014

Removed this from the Later milestone.
Added Oldschool-Milestone-Later label.

@DartBot
Copy link
Author

DartBot commented Jul 23, 2014

This comment was originally written by haaiee...@gmail.com


This seems to be fixed.
Using Chromium Version 36.0.1985.97 custom (280598).
The hack that I posted before is not needed anymore.

@a-siva
Copy link
Contributor

a-siva commented Jul 23, 2014

Added Fixed label.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants