CODEWITHSUNDEEP
svg
QueueHammer
QueueHammer

Reputation: 10824

Better way to position svg:polygon

The SVG elements <line>, <circle>, <rect>, <text> and , <image> allow for positioning by x and y based off of the view port. Furthermore they can also be relatively positioned. Is there any way to accomplish this for <polygon> than to wrap it in an <svg>? The closest substitute for <polygon>, <path>, also has this... issue.

Upvotes: 2

Views: 5903

Answers (2)

QueueHammer
QueueHammer

Reputation: 10824

Based on the excellent comment by @Michael Mullany I was able to find a solution to the issue. By putting the polygon or path in side a <defs> tag it can be used later on in a <use> tag. The <use> tag allows for setting of x and y attributes that function the same as the attributes of other simple shapes like <line>, <circle>, <rect>, <text>

http://jsbin.com/iqEkAsE/2

<svg width="100%" height="100%">
  <defs >
  <path id="Triangle"
    d="M 1 1 L 200 1 L 100 200 z"
    fill="orange" 
    stroke="black" 
    stroke-width="3" />
  </defs>
  <use x="33%" y="33%" xlink:href="#Triangle"/>
  <use transform="scale(-1)" x="-66%" y="-66%" xlink:href="#Triangle"/>
</svg>

It would be nice to be able to scale the shape dynamically by setting the width and height property of the <use> to a percent but it can still be scaled with a transform.

Upvotes: 9

mihai
mihai

Reputation: 38543

Use transformations (translation, rotation, scale), that is the correct way to do it.

The other shapes allow you to use a point defined by x,y coordinates because that's just a part of the shape definition (i.e. how do you define a circle, you need the center point and the radius).

In theory you could position an element using its bounding box, however the bounding box is not "settable" (there is no setBBox method), there is only getBBox()

Upvotes: 0

Related Questions