Animating a SVG element within a group tag using the path element

I'm struggling to make a slice of a circle rotate using the :hover selector in CSS.

Even though my initial attempt at applying CSS transformations works perfectly, the rotation stops when I introduce the :hover selector.

Below is the HTML and CSS code that I am working with:

transform-origin: 190px 50px;
  transform: rotate(360deg);
  transition: transform 10s;
}

#box:hover {
  fill-opacity: 0%;
  stroke: black;
}

#circle:hover {
  transform-origin: 10% 10%;
  transform: rotate(90deg);
  transition: transform 2s;
  stroke: black;
}
<div id="divThree">
    <svg id="box" version="1.1" width="500" height="300" viewBox="0 0 500 300" xmlns="htp://www.w3.org/2000/svg">
      <g class="slice">
        <path d="M 50 50 H 190 V 190 C 190 190, 58.99 189.99, 50 50"></path>
      </g>
      <circle id="circle" cx="190" cy="50" r="140" fill-opacity="0.0" stroke="red "fill="black"/>
    </svg>
  </div>

You can view my codepen here.

htmlcsssvg

Answer №1

Your CSS styling appears to be correct. A simple adjustment can be made by using #box .slice:hover.

However, it seems there is an issue with your SVG markup. The <g class="slice"> element is placed before the <circle ... element. As a result, the circle may overlap the slice, preventing it from being hovered over.

To resolve this, you can rearrange the elements so that the circle comes before the slice:

<svg id="box" version="1.1" width="500" height="300" viewBox="0 0 500 300" xmlns="htp://www.w3.org/2000/svg">
    <circle id="circle" cx="190" cy="50" r="140" fill-opacity="0.0" stroke="red "fill="black"/>
    <g class="slice">
        <path d="M 50 50 H 190 V 190 C 190 190, 58.99 189.99, 50 50"></path>
    </g>
</svg>

Alternatively, you can disable pointer events for the circle element:

#box circle {
    pointer-events: none;
}

You can view the working solution here: https://codepen.io/emtei/pen/PoqObRp?editors=1100

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

Tips for managing the background color of a box when the function is constantly refreshing in Internet Explorer

function process(Objects) { var objectId = Objects; displayContent(objectId); } function displayContent(objectId) { var boxId = objectId.id; var color = ret ...

javascriptjqueryhtmlcss

JavaScript and HTML are commonly used programming languages for developing

By utilizing JavaScript, I was able to generate a table dynamically based on user input. For example, if the user enters 3 and clicks "go", a table with 3 rows is created. Using the .keyup function allowed me to target a column successfully. However, an i ...

javascriptjqueryhtmlmysql

How can I change the background color of my notification box to red if the count is not equal to zero?

When the count equals 0, I don't want any effect on the notification box. However, when the count is not equal to zero, I want the notification box to turn red. I tried implementing this, but it's not working as expected. By not working, I mean n ...

javascriptjquerycssajax

Close the overlay by clicking outside of it

I'm working on creating a unique pop-up window that appears when a customer adds a product to their cart. The design features red and green background divs with a darker overlay (#overlay-daddy) and a white child div (#overlay). My issue arises from ...

javascripthtmlcss

Position an element in the middle of the range between the tallest and shortest characters

Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...

javascripthtmlcsslayout

Hiding content in HTML with the Display:none property

After exploring various posts on this topic, I am still unable to find a solution that fits my specific scenario. Despite the challenges, I thought it would be worth asking for recommendations. Currently, I have a PowerShell script generating a report in ...

javascripthtml

Contrasting onevent with addEventListener

After studying various DOM events, I attempted to implement the 'blur' event on the HTML body. My first attempt was with onblur document.body.onblur = () => { dosomething(); } and I also tried using AddEventListener document.body.addEven ...

javascripthtmldom

Trimming Text with JQuery

My goal was to truncate a string and add an ellipsis at the end using jQuery, but my code doesn't seem to be working as intended. Below is the jQuery code I wrote: $(".link-content > h4").each(function(){ var len = $(this).text().length; ...

jqueryhtmlcss

Use CSS alignment to combine both the profile picture and title on a webpage

Is there a way to seamlessly integrate a profile picture with text (title) on my tumblr theme? My main challenge lies in getting the alignment right. Additionally, I want it to look good in responsive view. If the title becomes too long, it should wrap un ...

htmlimagecssalignmenttumblr

Display identical elements from an array and shuffle them every 300 seconds

I created this code snippet that currently displays 5 random rows of data from an array each time it is executed. My goal is to modify the code so that it selects and displays the same 5 random values from the array for a duration of 5 minutes before rand ...

phphtmlarraysrandom

Can styles be universally applied to specific elements or classes on a webpage by using hover on a single selector?

Is it possible, using only CSS and no JavaScript, to apply styles to specific elements or classes throughout an entire webpage without restrictions such as descendants or siblings, by hovering over a particular selector? For instance, I would like to remo ...

htmlcsscss-selectorshoverpseudo-class

Import HTML file into email message

After successfully creating a script to send HTML emails, I encountered an issue. I have the email content stored in a separate HTML file, which is then read using a while loop and fgets(). However, I need to find a way to pass variables into the HTML. For ...

phphtmlemail

What is the best way to make a trail follow my shapes on canvas?

In my current project, I have implemented a feature where shapes are generated by spinning the mouse wheel. One specific shape in focus is the triangle, but other shapes follow the same generation process. The goal is to create a trail that slowly fades ...

javascripthtmlcanvas

Utilizing several carets in a single or multiple text areas and input boxes

Just a quick question... Can a textbox have two carets simultaneously, or can we have two separate textboxes both focused at the same time? I am aware of simulating this using keydown listeners but I'm specifically looking for visible carets in both ...

javascriptjqueryhtmlforms

Steps for shaping the dialog of Material-UI to fit an image

Is there a way to adjust the size of the dialog box to match that of the image? https://i.stack.imgur.com/pXtXg.png I've also tried changing the background color to transparent without success. https://i.stack.imgur.com/Hjx2x.png ...

htmlcssreactjsdialogmaterial-ui

Showcase each video stored within a specific directory in the form of a list using HTML 5

I'm working on an application that requires me to showcase a series of videos on a single HTML5 page using the video tag. Despite successfully uploading files to my folder, I am struggling to display them properly. My search for a solution has been fr ...

phphtml

What is the best way to make sure the background color of a container stretches across the full width of the screen?

I am currently learning HTML and CSS, and as a practice project, I am working on building a portfolio webpage. In the image provided, there are two containers, and I am facing an issue with the space on the sides when changing the background color. Despite ...

javascriptjqueryhtmlcss

What is the method for including HTML special characters in d3.js?

I am attempting to incorporate the degree symbol in my HTML code using ° const degreeNum = d3 .select(`#windBox${order}`) .append("text") .attr("x", 250) .attr("y", 130) .style("font", "bold 50px sans-serif") ...

javascripthtmld3.js

Can Selenium be executed from a <py-script> within an HTML file?

prefs = webdriver.ChromeOptions() prefs.add_experimental_option("detach", True) driver = webdriver.Chrome(ChromeDriverManager().install(), options=prefs) Following this code, it seems to stop running (It runs fine in a .py file so I believe all ...

htmlseleniumpyscript

The document.write function in JavaScript is malfunctioning

I've been attempting to utilize the javascript function document.write to incorporate an external css file in my template. However, I am aiming to achieve this using Twig, like so: document.write('<link href="{{ asset('bundles/activos/cs ...

javascripthtmlcsssymfonytwig