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

Is Joomla equipped with shortcodes akin to those found in Wordpress?

One of the great features of WordPress is the ability to use shortcodes to insert information into HTML without the need for programming knowledge in PHP or JavaScript. This simplifies tasks and increases safety. For example (this is just a hypothetical s ...

javascriptphphtmlwordpressjoomla

A compatibility issue between jQuery and Internet Explorer 7

, you can find the following code: $("body").delegate('area[id=area_kontakt]','mouseover mouseleave', function(e){ if (e.type == 'mouseover') { $("#kontakt_tip").css('display','block'); } else { $( ...

jqueryhtmlcsscross-browserinternet-explorer-7

Where is the location of the directory on the hard drive that was created using the getDirectory() method in HTML5?

I have been working on creating, deleting, and reading directories but I am unsure of where they are located on the hard drive. fs.root.getDirectory('something', {create: true}, function(dirEntry) { alert('Congratulations! You have succes ...

javascripthtmlfileapi

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

I am attempting to transmit the minimum and maximum values to PHP using submit through a dual slider bar The static page makes a request to the server-side PHP code <?php include('server/server.php') ?> Below is the JavaScript code ...

javascriptphpjqueryhtml

Max call stack size exceeded error encountered and logged without catching

While attempting to display multiple markers on a Google map within the Ionic framework, I encountered an Uncaught RangeError: Maximum call stack size exceeded error message in the log. The issue seems to be related to the Cordova Google plugin that I am ...

htmlangularjsgoogle-mapscordovaionic-framework

Sending the results from a Vue.js component to a text input field in HTML

Using vue.js and the v-for function to read QR codes has been a challenge for me. For example: <ul v-for="(scan,key) in scans" :key="key" > {{scan.content}} </ul> I need to extract the value inside {{scan.content}}, like an EmployeeID, but I ...

javascriptjqueryhtmlvue.jsqr-code

Steps for displaying the output of a post request in printing

I am currently working on creating a basic search bar functionality for daycares based on user input. I am utilizing a post request to an API and receiving back a list of daycares that match the input. Below is the code snippet: <template> <div ...

javascripthtmlvue.jsvuejs2vue-component

What is the best method for submitting an ajax form post when it is dynamically loaded within a bootstrap modal window?

Need some help with a Bootstrap modal form that is not submitting via AJAX as intended. When the form is submitted, the entire page reloads instead of having the data posted in the background. How can I fix this while keeping the page state? Below is the c ...

javascriptjqueryajaxhtmltwitter-bootstrap-3

Is it possible to interpret all events from multiple perspectives?

Is it possible to listen for events in three different ways? This example shows how we can listen for the load event: 1. <body onload="doSomething();"> 2. document.body.onload = doSomething; 3. document.body.addEventListener('load', doS ...

javascripthtmldom-events

Utilize CSS Grid to adjust the size of an image

Hi there! I'm currently working on resizing an image using a CSS grid layout. Here's the CSS code I have so far: /* Reset */ * { padding: 0; margin: 0; } html { height: 100%; background-image: url("/assets/images/background.p ...

htmlcsscss-grid

Achieving a bold border on top of an image without altering the image's dimensions

I'm in need of Photoshop-like selection functionality, but when I add a border to the enclosing div that holds the image, the image ends up smaller by twice the thickness of the border. How can I fix this issue? I have attempted a solution by adding ...

htmlcss

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if

Navigating to another division segment within an HTML document using the arrow keys: a guide

There are three main div boxes colored pink, red, and green.  I would like to enable movement of all segments using arrow keys. When the page is loaded, the active box will initially be in the 'pink' segment at the center. We can then navigate ...

javascripthtmlbootstrap-5

The HTML button triggers a function to execute on a different webpage when clicked

I'm facing a straightforward issue that I can't seem to figure out due to my limited experience with Angular and web development. The problem revolves around two components, namely home and dashboard. In the home.component.html file, there's ...

javascripthtmlcssangulartypescript

Combining Bootstrap navbar with React Router for seamless navigation

I am new to using React and I am having trouble linking pages with Bootstrap navigation. I am attempting to use React Router DOM to navigate to different pages on click, but the app is not compiling because BrowserRouter is not being imported properly. I c ...

htmlcssreactjs

Is the imported style file not properly scoped?

Whenever I attempt to import a CSS file using this method, the styling is not properly scoped. Is it necessary to write the styles within a style tag for them to work correctly? I have been experimenting with this in Vue-cli. <style scoped> @im ...

cssvue.jsvuejs2

Query Selector(jQuery selector) is a powerful tool for

Here is the HTML Table structure: <table class="display" style="width: 1000px;" id="failoverServers"> <thead> <tr> <th class="row_selector_head"> <input type='checkbox' class='select_all_ch ...

javascriptjqueryhtml

Finding a solution to this issue in Angular will consistently result in a false outcome

Can anyone explain why I keep getting the error message "This condition will always return 'false' since the types 'typeof ChartType' and 'ChartType' have no overlap" whenever I try to compare charTypeEnum with ChartType.text? ...

htmlangulartypescriptangular-material

The scaling transformation is not accurate for uneven pixel widths

I'm attempting to resize a div while keeping the inner element in the same position and at the same size. To achieve this, I am using transform: scale(value) on the wrapper and transform: scale(1/value) on the inside div. The issue arises when the in ...

htmlcsscss-transformsscaletransform

Highlight or unhighlight text using Javascript

Currently, I am facing a challenge in highlighting specific words on an HTML page. Although I have succeeded in highlighting the desired element, I am struggling with unhighlighting the previous word when a new search is conducted. Despite my attempts to i ...

javascripthtml