CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Rickey E Smith
Rickey E Smith

Reputation: 43

Cant get a SVG path to fit into SVG Box

I've been trying to get an SVG path to appear in the middle of my SVG rect that fills the entire svg element. So far I've tried the following things, to no avail

  1. Placing path element in a <g> tag, and transforming the group based on values that I've gotten from elementgetBBox(). I would use those values, and the values of the entire SVG box to try to get the right number to scale the element down, but it still dosen't fit, nor is centered
  2. Done the same thing as #1, but with a nested <svg> tag instead of a <g> tag.
  3. Tried to transform the element itself.

The main problems that I am having are:

I have a jsfiddle of the svg that I'm trying to work with, if that helps.

Upvotes: 3

Views: 2046

Answers (3)

Robert Longson
Robert Longson

Reputation: 124229

If you give the rect you want to fit an id of "rect" then this will fit the star into the rectangle:

var rectBBox = rect.getBBox();
var path = document.getElementById("star-2-outline");
var pathBBox = path.getBBox();

var scaleX = rectBBox.width / pathBBox.width;
var scaleY = rectBBox.height / pathBBox.height;
var translateX = rectBBox.x - pathBBox.x;
var translateY = rectBBox.y - pathBBox.y;

path.setAttribute("transform", "scale(" + scaleX + ", " + scaleY + ") translate(" + translateX + ", " + translateY + ")");

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101918

For method #2, if it's not obvious what the bounds of the path are (you are using relative path commands, so yours isn't), just experiment with the viewBox until you find the right bounds. For your star it turns out to be (50,55 - 460,455).

<svg viewBox='0 0 350 200' height='200' width='350' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="350" height="200" x="0" y="0" fill="#126d62"></rect>

    <svg  width="350" height="200" x="0" y="0" viewBox="50 55 410 400">
       <path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon" ></path>
      </svg>

</svg>

http://jsfiddle.net/epTp9/4/

And for method #3 it's just a matter of fuinding the right scale and then translating it to the right place.

<svg viewBox='0 0 350 200' height='200' width='350' xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="350" height="200" x="0" y="0" fill="#126d62"></rect>

    <path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon"
          transform="scale(0.5) translate(90 -55) "></path>

</svg>

http://jsfiddle.net/epTp9/5/

Upvotes: 2

lopa
lopa

Reputation: 474

here's a working fiddle

http://jsfiddle.net/epTp9/3/

here's the changed code for the path.

<g transform="scale(0.4)">
<path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon" ></path>

  </g>

Upvotes: 2

Related Questions