CODEWITHSUNDEEP
javascripthtmlcsssvg
Katie
Katie

Reputation: 751

SVG text and image centered within a rectangle

I'm really not familiar with SVG's so I'm sorry if this is actually a fairly easy problem..

I'm creating an SVG:

<svg height="100%" width="100%">
     <rect x="0" y="0" width="100%" height="100%" fill="#da552f"></rect>
     <image xlink:href="https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/703414.svg?Expires=1481685113&Signature=hsa76aA6t5W6xisN8bYKk5t74cmOzTXmYUObaVwE0hUso99Gb4czprrsQAtkaC0aOQJBhNfAn8MjRpKyu8M~AzS5OS3rthGOLFqa3Pk2lCwAWjs-KtTa9fSo7w-sZSJwG6LDeRm5B6T5hYnoKQLibJzCtHvSdUYlp5XBUx1RNvs_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q"  transform="translate(-35.5,-31)" x="50%" y="50%" height="50px" width="50px"/>
     <text fill="#ffffff" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="48" font-family="Verdana">Kitty Cat</text>
</svg>

And as you can see both the image of the cat and the text are centered in the rectangle, but this isn't the desired effect I want.

I'd like the image to be next to the text and both of them be centered in the rectangle.. example:

enter image description here

How is this doable using SVGs? Is javascript required? Any help would be great! Thanks

Upvotes: 4

Views: 9857

Answers (3)

Holger Will
Holger Will

Reputation: 7526

you could use a webfont or an emoji instead of an image...

svg {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px
}
<svg viewBox="0 0 400 200">
  <rect x="0" y="0" width="400" height="200" fill="pink" />
  <text x="200" y="100" dominant-baseline="middle" text-anchor="middle" font-size="30" font-family="sans serif">
    <tspan font-size="50">&#128049;</tspan>Kitty Cat</text>
</svg>

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101820

Unlike HTML, SVG has no automatic layout of groups of elements.

You have two choices:

  1. Cheat and put your image and text in HTML and use a <foreignObject> element to embed the HTML in your SVG. Although it is barely an SVG any more. And that only works in browsers.

  2. Use Javascript to measure the text and then re-position it in the centre.

function reCentre() {
  var svg = document.getElementById("mysvg");
  var group = document.getElementById("centreMe");

  // Get the bounding box of the image+text group
  var groupBounds = group.getBBox();
  
  // Get the size of the SVG on the page
  var svgBounds = svg.getBoundingClientRect();
  
  // Calculate new position for the group
  var groupPosX = (svgBounds.width - groupBounds.width) / 2;
  var groupPosY = (svgBounds.height - groupBounds.height) / 2;

  // Calculate the difference between the groups current position
  // and where it needs to be in order to be centred.
  var dx = groupPosX - groupBounds.x;
  var dy = groupPosY - groupBounds.y;

  // Give the group a translate transform to move it to this new position
  group.setAttribute("transform", "translate("+dx+","+dy+")");
}


// Initial centering
reCentre();

// Also recentre when window resizes
window.addEventListener("resize", reCentre);
<svg id="mysvg" height="100%" width="100%">
  <rect x="0" y="0" width="100%" height="100%" fill="#da552f"></rect>
  <g id="centreMe">
    <image xlink:href="https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/703414.svg?Expires=1481685113&Signature=hsa76aA6t5W6xisN8bYKk5t74cmOzTXmYUObaVwE0hUso99Gb4czprrsQAtkaC0aOQJBhNfAn8MjRpKyu8M~AzS5OS3rthGOLFqa3Pk2lCwAWjs-KtTa9fSo7w-sZSJwG6LDeRm5B6T5hYnoKQLibJzCtHvSdUYlp5XBUx1RNvs_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q" x="0" y="-50" height="50px" width="50px"/>
     <text fill="#ffffff" x="80" y="0" font-size="48" font-family="Verdana">Kitty Cat</text>
  </g> 
</svg>

Upvotes: 3

user2182349
user2182349

Reputation: 9782

Edit the x and y attributes of the image tag until the cat face is where you would like it.

<svg height="100%" width="100%">
     <rect x="0" y="0" width="100%" height="100%" fill="#da552f"></rect>
     <image xlink:href="https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/703414.svg?Expires=1481685113&Signature=hsa76aA6t5W6xisN8bYKk5t74cmOzTXmYUObaVwE0hUso99Gb4czprrsQAtkaC0aOQJBhNfAn8MjRpKyu8M~AzS5OS3rthGOLFqa3Pk2lCwAWjs-KtTa9fSo7w-sZSJwG6LDeRm5B6T5hYnoKQLibJzCtHvSdUYlp5XBUx1RNvs_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q"  transform="translate(-35.5,-31)" x="25%" y="45%" height="50px" width="50px"/>
     <text fill="#ffffff" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="48" font-family="Verdana">Kitty Cat</text>
</svg>

Upvotes: 0

Related Questions