SVG文本和图像以矩形为中心

Question

我真的不熟悉SVG，所以如果这实际上是一个相当容易的问题，我很抱歉..

我正在创建一个SVG：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

正如你所看到的那样，猫的形象和文字都以矩形为中心，但这并不是我想要的效果。

我希望图片旁边的文字，并且它们都在矩形的中心。例如：

如何使用SVG？需要javascript吗？任何帮助都会很棒！感谢

Answer 1

与HTML不同，SVG没有元素组的自动布局。

您有两种选择：

1. 作弊并将您的图片和文字放入HTML并使用<foreignObject>元素将HTML嵌入到SVG中。虽然它几乎不再是SVG了。这只适用于浏览器。

2. 使用Javascript测量文本，然后将其重新定位在中心。

＆＃13;
＆＃13;
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);
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

修改图片标记的 x 和 y 属性，直到猫脸位于您想要的位置。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以使用webfont或表情符号代替图片......

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>