CODEWITHSUNDEEP
csssvg
Amit
Amit

Reputation: 6294

Scale SVG from center

I have an svg as a background image in css, and I want to flip it. (scale(-1, 1))

When I try normal transformation, it dose not go about center, and looks weird.

Is there a way to flip an entire SVG around center, without JS?

Here is a demo using HTML, not CSS background image: https://codepen.io/anon/pen/bRVqwz

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'/></svg><br />
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' transform="scale(-1, 1)"/></svg>


svg {
  width: 50px;
  height: 50px;
}

Upvotes: 1

Views: 1211

Answers (2)

Eliya Cohen
Eliya Cohen

Reputation: 11458

First, to understand how to flip an SVG, u need to understand how the viewBox works (According to Mozilla MDN):

The value of the viewBox attribute is a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute preserveAspectRatio.

So, if you want to flip your svg, first you need to transform: scaleX(-1). Then, you need to pass to the [min-x] the negative number of your [width].

For example:

Original SVG: viewBox='0 0 12 20'

Flipped SVG: viewBox='-12 0 12 20'

Upvotes: 3

karthick
karthick

Reputation: 12176

You can try transform rotate with x and y transform="rotate(180 5 10)"

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' transform="rotate(180 5 10)"/></svg>

Documentation https://www.w3.org/TR/SVG/coords.html#TransformAttribute

Upvotes: 0

Related Questions