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-transforms
26
questions
0
votes
2
answers
56
views
How can I transform an SVG path without transforming applied gradient/filter?
Given some simple SVG like:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient1" x1=&...
- 18.6k
1
vote
1
answer
34
views
How to I apply the zoom transform to my d3 force directed graph?
Other similar answers I have found on StackOverflow are old and no longer apply to the latest version.
My zoomed function is being called. The transform parameter contains:
I assume I will need to ...
- 650
0
votes
0
answers
84
views
Determining visible center of SVG as rotation origin while panning and zooming
I'm developing an SVG viewer, using svg-pan-zoom library to pan and zoom the SVG.
What I want
What I want in the end is to be able to pan/zoom to a specific point in the SVG and be able to rotate from ...
- 121
0
votes
1
answer
256
views
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 ...
- 1,811
0
votes
0
answers
55
views
SVG make a clip-path to scale and relocate as its container scales
I have this svg:
<svg viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="clipPath">
<path d="...
- 3,274
1
vote
1
answer
708
views
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 ...
- 14.7k
2
votes
1
answer
872
views
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 ...
- 385
3
votes
2
answers
555
views
How to control `transform-box` for `<use>` 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 ...
- 1,481
1
vote
2
answers
1k
views
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 ...
- 1,112
1
vote
1
answer
174
views
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 ...
- 1,112
0
votes
1
answer
344
views
Odd transparency issues with SVG converting
I'm trying to convert SVG images to jpeg or png (quality doesn't matter)
I'm using a NuGet package named SVG.
Here's my vb code
Dim svgDocument = Svg.SvgDocument.Open(TextBox2.Text & "\" ...
0
votes
2
answers
1k
views
How do i toggle rotation on svg images in Bootstrap 4 Accordion card on click?
I have a svg arrow image within each header of my Bootstrap 4 accordion card. I want the header I open's arrow to rotate 180 degrees while it is open and to toggle back to it's initial state if I ...
- 21
1
vote
1
answer
287
views
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 ...
- 187
0
votes
0
answers
48
views
svg transform on element not working in Edge [duplicate]
This fiddle: https://jsfiddle.net/1tq8gkha/1/ shows the problem
<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" viewBox="0 0 14 10" width="20px"
transform="rotate(270)" >
&...
- 1,294
-1
votes
1
answer
448
views
Copy transformation from an SVG element to a SVG group
I have an SVG element and need to draw transform points around.
I'm using svg.js and part of its resize plug-in.
It works for moving and rotating an un-transformed element, but not for an element ...
- 396