3

I have a web page with a series of rows and columns, each column has an icon or image file. When an image is touched it will change color. I am currently doing this with JQuery and swapping out a new image with the new color.

I was thinking that I could do the same with SVG objects and then just change the style class for the object. The problem that I have been having is getting my SVG object to actually sit in the table cells. My SVG code:

<svg>
 <path d="m 524.9 304 c 53.3 0 96.1 12.7 96.1 28.6 l 0 78 c 0 15.8 -42.9 28.6 -96.1 28.6 -53.3 0 -96.1 -12.7 -96.1 -28.6 l 0 -78 c 0 -15.8 42.9 -28.6 96.1 -28.6 z" id="seat" />
 </svg>

This draws the object in the middle of my page even though I put this inside a <td></td>.

Is there a way to center an path like there is a shape?

Jared Farrish
  • 48,585
  • 17
  • 95
  • 104
John S
  • 7,909
  • 21
  • 77
  • 145

1 Answers1

1

Tough to tell out of context, but just from the code you have there it seems like you ought to assign a size to the svg element.

Sizing with svg is a little odd, since it's meant to be scalable. I would recommend adding three extra attributes to your <svg> tag:

width and height which are the size at which the svg element is displayed on the page. These are pretty straightforward and you can adjust them with your css.

viewBox is the really important one. It defines the boundaries of your image, and gives you a lot of control over relative sizing. Its value should be a string with 4 space-separated values: x y w h where x and y represent the coordinates of the top-left corner of the part of the image that will be visible, and w and h are the width and height of the visible portion of the image. These coordinates are relative within your drawing and will be scaled to the display size defined by width and height.

If the coordinates of your path or other svg elements lie outside of the viewBox they will be effectively cropped away.

I put together a fiddle that should help to illustrate how width, height, and viewBox relate. Hope that helps.

jshanley
  • 9,048
  • 2
  • 37
  • 44