Stack Overflow
Stack Overflow

Questions tagged [svg-transforms]

SVG transform interface SVGTransform is the interface for one of the component transformations within an SVGTransformList; thus, an SVGTransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute.

SVG transform interface

SVGTransform is the interface for one of the component transformations within an SVGTransformList; thus, an SVGTransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute.

23 questions
4
votes
1 answer

SVG : Ungroup objects / remove transform from command line

Here is an SVG file with some path :
Noan Cloarec
  • 2,024
  • 2
  • 13
  • 25
4
votes
2 answers

Get bounds of rotated rectangle

I'm trying to get the position of the actual rotated rectangle inside the bounding box. The rectangle is rotated by 120deg I'm trying to achieve the blue outline you can see here I manage to get the rotation right using the matrix but I can't get…
zaarr78
  • 467
  • 9
  • 21
3
votes
2 answers

SVG Circle file stroke from top in anti clockwise direction on windows

I created SVG Image with circles with filling stroke color. I am unable to fill color from the top position in an anti-clockwise direction. How to fill in an anti-clockwise direction with inline CSS (need to do using inline CSS). I tried in fiddle…
Siddu
  • 31
  • 1
  • 3
3
votes
0 answers

CSS transform not working with SVG in Firefox

I have this simple hourglass animation made in SVG. The animation works in Chrome but does not work in Firefox. I am applying css transform translate to the #upper-fill-clip and #lower-fill-clip rect. @keyframes flowdown { 0% { transform:…
besrabasant
  • 2,422
  • 6
  • 27
  • 41
2
votes
1 answer

How to get current values from attribute "d" of SVG path when transform property is applied (pure JavaScript)?

I am creating a mini SVG editor, I am doing it with pure JavaScript and I would like to generate a clean SVG, therefore, is there a formula, pattern, logic, algorithm, etc., to obtain the current command line values (aka drawing path) when applying…
Grizzly
  • 371
  • 2
  • 13
2
votes
2 answers

How to control `transform-box` for `` elements?

Background I’m loving the expanded CSS support in SVG2. It’s great not having to rewrite attributes over and over. So I’ve been converting some code in a project from SVG attributes to CSS. Most of this has worked just fine. When it comes to…
Zearin
  • 1,474
  • 2
  • 17
  • 36
2
votes
0 answers

SVG rendering issue with high translation values

I'm using d3 to plot data and want to zoom in heavily. Up to the point where I reach a scale factor above 10000 and a translation of more then 40000000. The problem is that that my plot starts to disappear when reaching a translate value of above…
Julius W.
  • 33
  • 4
1
vote
1 answer

Switch X and Y axis for everything in SVG?

I'm creating a bar chart with SVG, by default bars are vertical. But in some cases it looks better if bars are horizontal, like when there are only 2 bars. How can I reuse same SVG code and just switch X and Y axis to achieve that? It's actually…
Alex Craft
  • 13,598
  • 11
  • 69
  • 133
1
vote
2 answers

SVG AnimateTransform not working in Safari..?

Why is this animation, which works in FF and Chrome, not working in Safari (begin="click" does not trigger the animateTransform in Safari; replace click with for example 0s and you'll see it getting triggered)?
DevelJoe
  • 856
  • 1
  • 10
  • 24
1
vote
1 answer

Task Timeline with SVG - Cannot animate final transition

I'm trying to generate a task timeline coded as SVG in a generic way, and managed to do it until this point: https://jsfiddle.net/dx7uryob/ What remains to do is the following animation (on any task point): From: : To the "task" label rotating 90…
DevelJoe
  • 856
  • 1
  • 10
  • 24
1
vote
1 answer

CSS transform Center out of balance?

I am trying to animyte a little SVG for my Hamburger Menu but I have a odd problem, where the transform origin is slightly out of center when using transform-origin: center center. I made a little Fiddle to…
Nicolas Mierbach
  • 167
  • 10
1
vote
1 answer

Is it possible to decompose a generic [a, b, c, d, e, f] (svg) transform matrix into a series of rotate/scale/translate directives?

This is not a duplicate. I've looked through all of the other answers. I have an [a, b, c, d, e, f] svg transform matrix. I want to decompose it into any series of translate/scale/rotate(with optional center) operations. Skew is NOT an option. I'm…
Travis Griggs
  • 21,522
  • 19
  • 91
  • 167
1
vote
1 answer

Why don't translate(${x},${y}) and translate(${-x},${-y}) cancel out?

This is a snippet from https://observablehq.com/@d3/non-contiguous-cartogram , which controls the transformation of the shape of states. function transform(d, year) { const [x, y] = path.centroid(d); return ` translate(${x},${y}) …
dzx_dzx
  • 15
  • 4
1
vote
1 answer

SVG shadow of transformed element

I want to set a shadow on an element with a transform.
Ovilia
  • 7,066
  • 12
  • 47
  • 70
0
votes
1 answer

How to remove all transforms from text elements in an SVG with Inkscape

How do I remove all transform from text elements in an SVG while keeping the text elements and the font size in place? This question is similar to Removing transforms in SVG files, but this question her specifically addresses text elements. I…
user2690527
  • 1,729
  • 1
  • 22
  • 38
1
2