Raphael and Safari: The Perfect Pair

Lately, I've been working on a project using Raphael 2.0.1 and after running some cross-browser checks, I noticed that text is not displaying correctly in Safari. It seems like the 'dy' attribute is inheriting the value of the 'y' attribute.

Here is part of the HTML code related to this issue:

<text style="font: normal normal normal 12px/normal 'Helvetica Neue'; text-anchor: start; cursor: pointer; opacity: 0.7; " x="96" y="15" text-anchor="start" font="12px &quot;Helvetica Neue&quot;" stroke="none" fill="#17d6c6" opacity="0.7">
<tspan dy="15">U.S Population - Blood</tspan>
<tspan dy="10.799999999999999" x="96">Type Breakdown</tspan>
</text>

Below is my JavaScript code for the problematic text:

var type_text = lab_culture_type.text(96, 15, 'U.S Population - Blood\nType Breakdown');
    type_text.attr({'fill':'#17D6C6', 'font':'12px "Helvetica Neue"', 'text-anchor':'start','cursor':'pointer'});

In Safari, only the 'y' and 'cy' values are being linked together. Since I'm dealing with a lot of text elements, assigning individual classes doesn't seem like a great solution (it feels messy). I've attempted to target the 'dy' attribute without success. For reference, I am utilizing Raphael along with jQuery.

I am using Firefox 9.0.1 and Safari 5.1.2 on OS X.

Any assistance on this matter would be greatly appreciated!

javascriptsafarisvgpositioningraphael

Answer №1

Give this a try: Ensure that the container is placed before initializing Raphael.

var newContainer = $('<div></div>'),
    r;

// Insert
$('body').append(newContainer);

r = Raphael($newContainer[0], 800, 600);

// Add text with correct dy attribute on tspan...

If you do it in reverse, the dy attribute of tspan will be incorrect (as you have observed). This issue seems to occur in all WebKit browsers.

I trust this solution works for you.

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

Is it possible to author TypeScript modules in a format other than ES6?

Is it possible to utilize AMD for writing code? define([ 'hb!./some/file.hb' ], function(template) { // }) ...

javascripttypescript

Extracting data types from strings in JavaScript

I have been developing a project using HTML and JavaScript where I need to extract two strings from the HTML script, pass them to JavaScript, and convert them into their respective variable types similar to using typeof. For instance, "true" shou ...

javascripthtmljsonstring-parsingtypeof

Encountering Reference Error while Using AWS Amplify with Nuxt.js: Navigator Undefined

Currently, I am experimenting with Nuxt.js and AWS Amplify to leverage the benefits of SSR/SEO for my project. I have successfully integrated Amplify into my project and followed the "Manual Configuration" steps outlined in the Amplify Docs to set it up. ...

javascriptamazon-web-servicesvue.jsvuejs2nuxt.js

Sorting alphanumeric strings in React Bootstrap Table Next on a dynamic table

I am facing an issue with sorting columns in a dynamic table with over 70 columns using React-Bootstrap-Table-Next. The problem arises when trying to sort the columns in alphanumerical order, as some columns contain numbers and others contain letters. The ...

javascriptreactjsreact-bootstrap-table

Break down and extract the fully organized variable using a single expression

Is it possible to destructure a variable while still having access to the structured variable within the same function call? For instance, what can be used in place of ??? below to achieve the desired result (and what other changes might need to be made i ...

javascriptdestructuring

What is the method for retrieving child tags using the each statement?

How can I retrieve child tags using an each statement? <svg id="svgcontent" > <g id="layer" > <g> <g id="test1" > <g> <g id="test2"></g> <g id="test2"> </g> <svg> I am looking for the fo ...

jquerysvg

observing the value of the parent controller from the UI router state's resolve function

I am facing an issue in my AngularJS application while using ui-router. There are three states set up - the parent state controller resolves a promise upon a successful request, and then executes the necessary code. In the child state portfolio.modal.pate ...

javascriptangularjsangular-ui-router

Encountering an error in Laravel 5.1 and Vue.js - Error code 21678: Uncaught TypeError: Unable to retrieve 'data' property from null

Recently, while working on my Laravel and Vue.js application, I encountered an issue. Everything was running smoothly until I added another component following the same procedures as before. Suddenly, the data stopped displaying in the table, and I started ...

javascriptphplaravelvue.js

Sorting table by priority in HTML is not functioning as expected

I am currently developing this code for a SharePoint 2010 platform. While the table can currently be sorted alphabetically, I am looking to implement a different functionality. Unfortunately, I am facing an issue with changing variables 'a' and ...

javascripthtmlsortinghtml-table

Getting rid of the background color and style attribute on a webpage

I have a complete HTML page, but now I need to make several changes: First, I want to remove all the bgcolor and style attributes from the tables and body tags. I am attempting it like this: $('#container').find("table").removeAttr("style"); ...

javascriptjqueryhtmlcss

The shopping cart in our e-commerce website is refreshed in real-time thanks to the integration of J

I am currently enhancing the Codeigniter Cart with JQuery by making an Ajax call for updates. Below is my JQuery function: $(function() { $('.cart_form select').on('change', function(ev) { var rowid = $(this).attr('c ...

javascriptphpjqueryajaxcodeigniter

An error occurred at line 120 in the index.js file of the http-proxy library: "socket hang up"

I encountered an issue while running expressJS in one of the containers within docker-compose. When I repeatedly refresh the landing page by pressing CMD+R (approximately every 3-4 seconds), it displays an error message "Error: socket hang up" causing the ...

javascriptnode.jsexpressnginxpassport.js

connect the validation of forms to different components

I am currently working on components to facilitate the user addition process. Below is an example of my form component: createForm(): void { this.courseAddForm = this.formBuilder.group({ name: ['', [ Validators.required, ...

javascriptangulartypescript

Discovering all class names following the same naming convention and storing them in an array through Javascript

Hey everyone, I could use some assistance with a coding challenge. I'm aiming to extract all class names from the DOM that share a common naming convention and store them in an array. For instance: <div class="userName_342">John</div> & ...

javascripthtml

Is there a newline and colon in the req.body from the post router?

Can someone help me with extracting the post data from req.body? Here is my post data: { name:'asdf', completed: false, note: 'asdf' } However, when I try to console it using JSON.stringify, req.body ends up looking like this: {" ...

javascriptjsonnode.jsexpress

Align the headers of columns to the right in the AgGrid widget

Is there a way to align the column headers to the right in AgGrid without having to implement a custom header component? It seems like a lot of work for something that should be simple. You can see an example here: https://stackblitz.com/edit/angular-ag-g ...

javascriptcssangularag-gridag-grid-angular

Display HTML using JavaScript/jQuery

I am trying to figure out how to print a document by passing custom HTML code. Below is the code I have tried, but unfortunately it's not working: function Clickheretoprint() { var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes, ...

javascriptjqueryhtmljquery-ui

Using the use tag for SVG fills is a great way to

Currently, I am attempting to modify the color of an SVG that is displayed on various pages using the code <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>. You can find the methods I have been experimenting with here: h ...

csssvgshadow-dom

(Build an Angular, TypeScript Application) Develop a new function using a string that includes an if statement without using the eval function

Is it possible to create a new function from a string that includes an if condition? The actual string will be provided externally, but for the sake of this example, everything is hardcoded. let f1: number = 1; let f2: number = 0; let condition: string ...

javascriptangularif-statement

Issue with Ckeditor inside a bootstrap modal

I am encountering an issue while trying to integrate ckeditor into a bootstrap modal. Whenever I attempt to use it, the functionality does not work as expected. Clicking on any icons triggers an error in the console stating Uncaught TypeError: Cannot rea ...

javascriptjquerytwitter-bootstrapmodal-dialogckeditor