The usage of uppercase letters in HTML attributes

I'm struggling to get animation working on my chart. I have been using jQuery's append function to add an animation tag to my HTML page, but for some reason the animation isn't displaying properly. The issue seems to be related to the capital letters in the attributes of the animation tag, such as attributename or repeatcount. When I try to include these attributes using the attr method or a different approach, the capital letter is being ignored and therefore, the animation fails to work.

<rect fill="#555" width="2" height="2" x="0" y="0">  
  <animate attributename="x" from="0" to="0" attributename="XML" dur="1.5s" repeatcount="indefinite"></animate>
  <animate attributename="y" from="0" to="0" attributetype="XML" dur="1.5s" repeatcount="indefinite"></animate>
</rect>
htmljquerycssd3.jsjquery-animate

Answer №1

The reason for this is that when you transition from 0 to 0, there is no visible change. However, if you introduce uppercase letters and instruct the box to move (for example, from 0 to 2), you will notice a difference :)

<svg viewBox="0 0 10 10">
  <rect fill="#555" width="2" height="2" x="0" y="0">
    <animate attributeName="x" from="0" to="2" attributeName="XML" dur="1.5s" repeatCount="indefinite"></animate>
    <animate attributeName="y" from="0" to="2" attributeType="XML" dur="1.5s" repeatCount="indefinite"></animate>
  </rect>
</svg>

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

Creating animations with an svg mask can be effective, however, it seems to only work properly

I have been experimenting with creating a transition effect using SVG masks and CSS. Initially, everything was working as intended, but after a few repetitions (usually 1 or 2, unpredictably), the transition effect would suddenly stop and become instantane ...

cssanimationsvgsvg-animate

Attempting to optimize a webpage design for compatibility with Google's mobile-friendly testing tool

After much searching on the forum, this is my first post, so I kindly ask for patience! I am dealing with a 20-year-old website that urgently needs to be optimized for mobile devices. With almost 2200 pages, manual editing is out of the question, so I nee ...

htmlcssresponsive-design

Challenges with XML parsing in Ajax and jQuery

Encountering an Issue: Add "undefined" for each element. I've spent hours researching solutions to this problem, but have not been able to find a resolution. Apologies if this question has been asked numerous times before. I am attempting to retriev ...

jqueryajaxxml

Using jQuery, select the line immediately following the last `<br>` tag and apply a `<span>` tag to style it

Current code snippet to work with: <div class="desc-wrapper">Dr <br> Credentials<br> Lecturer</div> I am trying to extract the text following the last <br> tag and then insert <span></span> between Lecturer in or ...

jquery

How can you position an image overlay with multiple text elements using the 'align-items-end' property, all within a block layout?

I am facing a challenge in creating an image with overlay text (H3 above a p), where the text should be displayed at the bottom left without breaking the block and going inline. Currently, with my code, I am seeing the block elements of text change to in ...

htmlcssbootstrap-4

Tips for selecting a checkbox with Puppeteer

I've implemented the code in this way: await page.$eval('input[name=name_check]', check => { check.checked = true; }); This code is intended for multiple checkboxes. However, I need it to work for a single checkbox only. Is there a way ...

javascriptjquerynode.jsgoogle-chrome-devtoolspuppeteer

Using Struts2 actions in combination with jQuery AJAX calls

Similar Question: How to utilize $.ajax() method in struts2 In simple terms: 1. Could someone explain how to trigger a struts action using jquery ajax? (without using the struts jquery plugin) 2. How do I retrieve results and display HTML output cor ...

javascriptjqueryajaxstruts2

What is the simplest method for transferring data to and from a JavaScript server?

I am looking for the most efficient way to exchange small amounts of data (specifically just 1 variable) between an HTML client page and a JavaScript server. Can you suggest a script that I can integrate into my client to facilitate sending and receiving d ...

javascripthtmlnode.jsclient-server

unable to apply custom css to primefaces components

In my Java EE application, I am using a ready-made template with CSS and jQuery. All the PrimeFaces components are rendering properly except for the panelGrid control of PrimeFaces 3.2. It is being displayed with a border, but I want it without a border. I ...

javacssjsfprimefaces

Trouble activating header checkbox on initial click

Hello everyone, I have a question about two views: 1- Index 2- Edit In my grid, the header has a single checkbox. When I try to click the checkbox to select all rows, it doesn't work properly. The first time I click to uncheck and then check it agai ...

javascriptjqueryasp.netcheckbox

How to conditionally prevent event propagation to children in VueJs

This Vue component is called ColorButtonGroup, and it serves as a group of checkbox/toggle buttons. It has a maximum limit of 4 colors that can be selected. The component utilizes another component called ToggleButton, which is a simple toggle selection w ...

javascripthtmlvue.jsvuejs2dom-events

Achieving a perfect curve with a specific circle radius using CSS

I came across a design tutorial on magic indicators from YouTube and created the following design: However, I am looking to achieve a smoother curve as a continuation of the circle when selected, instead of using elements with small border-radius like in ...

css

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

There is a div with the id #increase-text-weight that displays the text "INCREASE TEXT WEIGHT". Upon clicking on it, the font weight of another div with the id #post-content should be changed to font-weight: 500 and the text inside #increase-text-weight s ...

javascriptjqueryhtmlcss

Issue with Attaching Click Event to Dynamic Div Elements

I've implemented divs with a Click Event triggered by a value entered in a text box. See an Example Here Upon opening the page, clicking any rows will trigger an alert. However, if you change the value in the text box (Enter Number) and click load, ...

javascriptjqueryhtml

Is it possible to eliminate the sticky class as you scroll down?

Check out this jQuery code I wrote to remove the sticky class while scrolling down: $(window).scroll(function (e) { if ($('.main_form_wrapper').length != 0) { var window_scroll = $(window).scrollTop(); console.log(window_scro ...

jqueryhtmlcss

Hover effect within nested CSS styling applied to the list item element

I have structured my HTML as follows: <div id="chromemenu" class="chromestyle"> <ul> <li><a rel="dropmenu1" href="#" class="">Buy</a></li> <li><a rel="dropmenu2" href="#" class="">Sell</a>< ...

jqueryhtmlcsscss-selectors

Establish the year that automatically appears when using Pickadate.js

I've been working on a small project using the pickadate.js plugin. In the default setting, the selected year is always the highest in the list of options. For example, if the range is set from 1910 to 2012, the default selected year will be 2012 a ...

jquerypickadate

Troubleshooting Material-UI Menus

I need the menu to adjust its height dynamically as the content of the page increases vertically. Even though I have applied "height:100%" in the styles, it doesn't seem to work. Can anyone assist with this issue? Here is the code snippet: import R ...

javascriptcssreactjsmaterial-uimenu-items

Creating a customized file input using CSS

I am currently utilizing Bootstrap4 to craft my webpage and I am incorporating a custom file input bar. To retrieve the three labels of the input bar ("Choose file", "Browse", "Upload") from my stylesheet, I have created three custom classes with their co ...

javascripthtmljquerycssbootstrap-4

When hovering, the <a> element does not fully encompass the background color

I am currently working on a navigation bar that changes the background color of the links when hovered. However, I encountered an issue where the dropdown menu in the navigation bar does not cover the entire area. body { margin: 0; font-family: Aria ...

css