A comparison between centering an SVG element: Chrome versus Safari

Attempting to align an SVG element in the center of its parent container is proving challenging due to inconsistencies between Chrome and Safari. In Chrome, the text is perfectly centered inside the square, but not so in Safari:

<svg width="200px" height="200px">
  <g transform="translate(70,70)">
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path>
    <g>
      <text text-anchor="middle" dominant-baseline="middle" style="fill: white" transform="scale(2)">
        <tspan>test</tspan>
      </text>
    </g>
  </g>

</svg>

Outcome:

https://i.sstatic.net/OzV0i.jpg

A jsFiddle was generated for this issue:

https://jsfiddle.net/yq11jot0/

Is there a reliable way to vertically center the text within the square?

htmlcsssvgcross-browser

Answer №1

It appears that Safari requires the inner tspan to have the dominant baseline set to middle. This means that the following code snippet will also function correctly in Safari:

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(50,50)">
    <path class="node" d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80" style="fill: rgb(247, 61, 0);"></path>
    <g>
      <text text-anchor="middle" fill="white"><tspan dominant-baseline="middle">test</tspan></text>
    </g>
  </g>
</svg>

Answer №2

Have you considered using dy as an alternative to dominant-baseline?

<svg width="200px" height="200px">
  <g transform="translate(70,70)">
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path>
    <g>
      <text text-anchor="middle" dy="0.25em" style="fill: white" transform="scale(2)">
        <tspan>test</tspan>
      </text>
    </g>
  </g>

</svg>

Answer №3

Have you tried eliminating the scaling and translating elements, as they may cause browser-related issues? How does it perform in Safari?

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0 H200 V200 H0 z" fill="gray" />
    <text x="100" y="100" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="100" >test</text>
</svg>

Please take note of the following:

  • Avoid using px units
  • The text is centered within the square using the x and y attributes.

Answer №4

The issue was resolved in Safari Technology Preview 174 by ensuring that the 'dominant-baseline' property is inherited [1].

"Now the dominant-baseline CSS property is properly inherited."

[1] Click here for more information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using PHP to create multiple div elements and then concealing them all

I'm having an issue with the hide feature not working. My intention is to hide each dynamically generated div and gain control over them, but the problem seems to lie in the div id incrementing. Any assistance would be greatly appreciated! <?php $ ...

phpjavascriptjquerycss

Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...

javascripthtmlcss

Issue with opening mobile app from deep link in HTML email

My HTML form contains a deeplink that is submitted through the SendGrid API on nodeJS. After sending the email, users can view it but are unable to click on the deeplink. <!DOCTYPE html> <html> <head> ...

htmlnode.jsemailsendgriddeep-linking

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

I have the following HTML textarea: <textarea name="splitRepComments" cols="20" rows="3" ></textarea> I have implemented a maxlength restriction using jQuery with the following function: var max = 100; $('#splitRepComments').bind(" ...

javascriptjqueryhtmlcsstextarea

I am facing an issue where the HTML button is not properly interacting with the JavaScript function

function idk() { let cypher = {A:"G",B:"L",C:"Z",D:"E",E:"Y",F:"R",G:"D",H:"N",I:"K",J:"W",K:"J",L:"B",M:"Q",N:"F",O:"S",P:"C",Q:"V",R:"X",S:"I",T:"O",U:"M",V:"T",W:"A",X:"U",Y:"H",Z:"P"}; var answer = prompt('What cypher are you going to use 1 - 26& ...

javascripthtmlfunctionbutton

Creating a new grid row when changing the order of elements in the grid column arrangement

Dealing with HTML that is not under my control, I am attempting to rearrange the elements using CSS grid. Despite setting grid-template-rows: 1fr, the layout shows 2 rows with 3 columns each instead of a single row with 3 columns. .grid-container { b ...

htmlcss

How can I annotate the overall count of occurrences of a keyword across multiple models following filtration in Django?

I have a situation where my 'Keyword' model stores keywords for 4 other models, each with a 'key_list' field that is a ManyToManyField pointing back to the 'Keyword' model. The models have multiple keywords, and I am successfu ...

pythoncssdjangopython-3.x

Sending a parameter to a function using ng-init

I am trying to display repeated data within a div element, with another iteration within that div using the id value from the first iteration. I am attempting to pass this value using a function in ng-init, but I am encountering an error. <div ...

javascripthtmlangularjs

What is the best way to update just the image path in the source using jQuery?

I am currently working on implementing a dark mode function for my website, and I have successfully adjusted the divs and other elements. However, I am facing an issue with changing the paths of images. In order to enable dark mode, I have created two sep ...

javascripthtmljquerycss

Utilizing Angular and the Kendo UI framework to customize the dimensions of a Kendo window

Is there a way to dynamically set the height and width of the kendo window based on the content of the kendo grid? Below is the code snippet for my kendo-window: <div kendo-window="Operation.OperCustWind" k-width="800" k-height="700" ...

javascripthtmlcssangularjskendo-ui

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

htmlcsscss-transitions

Creating a platform akin to YouTube for sharing videos online

Currently, I am in the process of creating a personalized website that bears similarities to YouTube. However, I am unsure about how to enable new pages and files on this platform. Despite being relatively new to HTML, I possess a basic understanding of co ...

htmlyoutubeweb

Transmit a parameter from a JavaScript code to a Python script

I am using a python script to execute queries in an Oracle Database by passing arguments. prov.py #!/usr/local/bin/python2.7 import sys import argparse import cx_Oracle import json import cgi import cgitb cgitb.enable() lst_proveedores=[{}] conn_str = & ...

javascriptpythonhtmlajax

In Safari, an animated link does not respond to pointer-events, making it unclickable

Exploring the world of CSS animations, I have created a snippet where elements appear sequentially. Take a look at it first: .wrapper { pointer-events: none; /* disable pointer events until animation completes */ } .text { position: absolute; } ...

htmlcsssafaricss-animationspointer-events

Creating a visually dynamic stack of images using javascript, jquery, and HTML

I'm interested in creating a unique image viewer using javascript/jQuery/HTML that combines elements of a book page flip and iTunes coverflow, optimized for mobile device browsers. I've been searching for tutorials to help kickstart this project, ...

javascriptjqueryhtmlimagejquery-animate

Convert JavaScript code to Google Appscript

Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file? <script> //google. ...

javascripthtmljquerycssgoogle-apps-script

What is the best way to align an HTML DIV with a logo on the left side?

I am trying to position a div called #top_menu in the center of the page. <div id="top_menu">This is the menu and it is centered on the page</div> Here is my CSS code: #top_menu { margin: 0 auto; width: 600px; ... } Next to the top menu, I ...

htmlcsslayoutcentergraphical-logo

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

javascripthtmlcssvue.jsvuetify.js

Can someone guide me on developing a similar design utilizing HTML canvas with HTML 5 technology?

Hey everyone, I could really use some assistance on creating a design with Html 5 canvas. My current issue is that the rectangles I'm trying to generate are overlapping and not fitting properly within the canvas. Below, you'll find both a referen ...

htmlcssreactjs

Creating unique navigation bar elements

I'm currently working on an application and facing an issue with the navigation from the Component to NavbarComponent. If you'd like to check out the application, you can visit: https://stackblitz.com/github/tsingh38/lastrada The goal is to hav ...

htmlcssangular