SVG Text und Bild in einem Rechteck zentriert

Question

Ich bin wirklich nicht mit SVG vertraut, so tut mir leid, wenn dies tatsächlich ein ziemlich einfaches Problem ist ..

Ich erstelle ein 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>

und wie Sie das Bild der Katze und dem Text in dem Rechteck zentriert sehen beide können, aber das ist nicht der gewünschte Effekt ich will.

Ich mag das Bild auf den Text neben sein und beide in dem Rechteck .. Beispiel zentriert werden:

Wie ist dies machbar mit SVGs? Ist JavaScript erforderlich? Jede Hilfe wäre großartig! Dank

Answer 1

Im Gegensatz zu HTML, hat SVG kein automatisches Layout von Gruppen von Elementen.

Sie haben zwei Möglichkeiten:

1. Cheat und Ihr Bild und Text in HTML setzen und ein <foreignObject> Element verwenden, um die HTML in Ihrem SVG einzubetten. Obwohl es kaum mehr ein SVG ist. Und das funktioniert nur in Browsern.

2. Verwenden Sie Javascript, um den Text zu messen und dann in der Mitte neu zu positionieren.

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>

Answer 2

Bearbeiten Sie die x und y Attribute des Bild Tag, bis die Katze Gesicht ist, wo Sie es möchten.

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

Answer 3

Sie eine WebFont oder ein Emoji anstelle eines Bildes ...

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>