Below is an SVH text element:
View the JSFiddle here - http://jsfiddle.net/E4VvX/
<text y="9" x="0" dy=".71em" style="text-anchor: middle; max-width: 30px;width: 30px;white-space: pre-wrap;" >Jul 2014</text>
The text currently appears in a single line like this: ----->
I would like the text to be displayed in two lines like this: ----->
Any suggestions on how I can achieve this?
To create the desired effect, make sure to enclose each text element in a tspan tag, setting the d attribute to 0 and the dy attribute to adjust the positioning.
.dt {
text-anchor: middle;
-webkit-transform: translate(50px,50px);
-moz-transform: translate(50px,50px);
-ms-transform: translate(50px,50px);
-o-transform: translate(50px,50px);
transform: translate(50px,50px);
}<svg width="100px" height="100px">
<text class='dt'><tspan x="0" dy="0em">Jul</tspan><tspan x="0" dy="1em">2014</tspan></text>
</svg>UPDATE:
A similar effect can be achieved using foreignObject, but please note that it may not be supported by Internet Explorer 9.
foreignObject {
text-align: center;
-webkit-transform: translate(50px,50px);
-moz-transform: translate(50px,50px);
-ms-transform: translate(50px,50px);
-o-transform: translate(50px,50px);
transform: translate(50px,50px);
}<svg width="100px" height="100px">
<foreignObject width="40px" height="40px" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">Jul 2014</body>
</foreignObject>
</svg>My website has multiple phone fields, each formatted like this: $("#HomePhoneInput").inputmask({ "mask": "(999) 999-9999" }); $("#WorkPhoneInput").inputmask({ "mask": "(999) 999-9999" }); $("#CellPhoneInput").inputmask({ "mask": "(999) 999-9999" ...
I am struggling to update the colors of 3 HTML divs dynamically, but unfortunately the code below doesn't seem to be effective. function App() { const [redBgColor, setRedBgColor] = useState(null) const [yellowBgColor, setYellowBgColor] = useState( ...
Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of ...
Exploring the world of JS, I set out to create a basic calculator after just one week of lessons. However, I hit a roadblock when trying to extract user-input values from my HTML text fields. Here's a snippet of my html: <div class="conta ...
Is there a way to retrieve the custom attribute "location" of an option selected from a datalist and display it? I understand that for a select element we can use selectedIndex, but how can this be achieved with datalist? <!DOCTYPE html> <html&g ...
My issue lies in retrieving the href attribute of <a> tags when there is another element nested inside them: Here's the code snippet: const $elems = document.querySelectorAll('.content-container a') var elems = Array.from($elems) e ...
Can someone explain to me why my absolutely positioned element is displaying after my child_static div? I'm under the impression that absolutely positioned elements are removed from the normal flow. So why isn't child_absolute covering the child_ ...
Currently, I am in the process of designing a layout using the Packery library from Metafizzy to showcase post titles and thumbnails. The idea is that when these posts are clicked on, the initial content will be hidden, and then replaced with the rest of t ...
Seeking Alternatives I am curious to find out if Vue.js offers a different approach for outputting data beyond the conventional curly braces. Is there a syntax similar to Angular's ng-bind directive that I could utilize? Although Vue.js primarily ut ...
Currently, I am constructing an app using ionic framework and facing a challenge in inserting a linebreak within an ionic tag to ensure proper display inside the designated container... <h2>{{caravan.model}}</h2> ...
I am trying to create a div that slides out of the viewport and then fades in at the same spot with a different background image. However, currently it only slides out and does not fadeIn: $('#myDiv').hide('slide').queue(function() { ...
I am currently in the process of developing a Node script that will establish a connection with an external server's MongoDB and add a new user. This is pretty basic stuff that I have encountered in numerous tutorials while using localhost. However, I ...
I am working on a file upload feature where each uploaded file should have a progress bar that updates as the file gets uploaded. I'm using a state to keep track of selected files and their respective progress: interface IFiles { file: File; c ...
Can someone assist me in achieving the output displayed in the image? I want to separate the header th into two lines like the blue line shown. I need two headers for a single td column. Please help, thank you. https://i.sstatic.net/SwILH.png <style& ...
Looking for a solution to create a money mask for an input field without using jquery in my application. Is it possible to achieve this using regular expressions with 'on key up' events, for example? Below is the code snippet: <tr> & ...
I have created a dynamic quote calculator for a Next.js project that allows users to calculate prices based on word count and selected languages. Currently, the price is calculated using a fixed rate of 0.05 per word. 'use client'; import { useS ...
I've been successfully retrieving data from my Firestore database, but I've encountered a major issue that I can't seem to resolve... Whenever I click the "Read Data" button, I have to press it twice in order to see the console log of the d ...
I am currently working on a project using Angular and Material2. Within this project, I have created a moment object in the following way: myDate = moment.utc(new Date()).format("YYYY-MM-DD HH:mm:ss"); This object is then passed as an argument to ano ...
Here is the code snippet I'm working with: <div>First</div> <div class="second">Second</div> <a>Alink</a> div{ display: block; float:left; } .second{ clear:right; } http://jsfiddle.net/cg4gj/ I am ...
I am working on a React app that has a checkbox to disable a datepicker. However, when I use the checkbox to disable it, I am unable to select any date. If I remove the checkbox and its function, there is no error. Currently, the error message I am getting ...