Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

In my search on SO, I came across a lot of information about rotating gradients. However, my issue is the opposite.

I have an icon created from multiple paths that I want to fill with a vertical gradient. I have successfully done this and it works well.

Now, my challenge is to rotate a path or group while keeping the overall gradient of the icon fixed from top to bottom. Currently, when I rotate the semicircle in my test, it transitions from blue at the bottom to red as it reaches the top.

Although this example is simple, my goal is to be able to rotate or move paths and groups within my art piece while maintaining a consistent gradient fill throughout the entire artwork, similar to how I can do with non-animated artwork.

<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <style>
    .spinner {
      transform-origin: center;
      animation: spinner_StKS 0.75s infinite linear;
    }

    .ring,
    .bell {}

    @keyframes spinner_StKS {
      100% {
        transform: rotate(360deg);
      }
    }
  </style>

  <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
    <stop offset="0" stop-color="red" />
    <stop offset="1" stop-color="blue" />
  </linearGradient>

  <g class="icon" fill="url(#gradient)">
    <g id="bell" transform="translate(8.000000, 7.050223)" class="bell">
      <path d="M15.8842999,14.4638359 C14.9360423,12.930403 14.4236902,11.1769083 14.4002435,9.38474047 L14.4002435,6.2627564 C14.4002435,2.80393155 11.5347569,1.77635684e-15 8,1.77635684e-15 C4.46524313,1.77635684e-15 1.59975652,2.80393155 1.59975652,6.2627564 L1.59975652,9.3800434 C1.5771244,11.1738044 1.06474385,12.9290182 0.115700067,14.4638359 C-0.0338774353,14.7055293 -0.0387448115,15.0073403 0.102964457,15.2535317 C0.244673725,15.4997232 0.510966493,15.6521939 0.799726089,15.6521939 L15.2002739,15.6521939 C15.4890335,15.6521939 15.7553263,15.4997232 15.8970355,15.2535317 C16.0387448,15.0073403 16.0338774,14.7055293 15.8842999,14.4638359 Z" id="Path"></path>
      <path d="M8.80563065,17.8637298 C9.48463281,17.6269821 10.018941,17.1041517 10.260886,16.4397355 L5.73911399,16.4397355 C5.95277088,17.026486 6.39588476,17.5061499 6.97097137,17.7732021 C7.54605798,18.0402543 8.20600694,18.0728182 8.80563065,17.8637298 Z" id="Path"></path>
    </g>

    <path d="M16,4.42658222 C21.6727273,4.42658222 26.6181818,8.49003326 27.4909091,14.1498401 C27.6363636,15.1657028 28.5090909,16.0364423 29.6727273,16.0364423 L29.6727273,16.0364423 C30.8363636,16.0364423 31.8545455,15.0205796 31.8545455,13.8595936 C31.8545455,13.7144703 31.8545455,13.5693471 31.8545455,13.4242238 C30.4,4.71682872 22.2545455,-1.23322459 13.5272727,0.218007922 C6.69090909,1.37899393 1.30909091,6.60343099 0.290909091,13.4242238 C6.66133815e-16,14.7303331 0.872727273,15.7461958 2.03636364,16.0364423 C2.18181818,16.0364423 2.32727273,16.0364423 2.47272727,16.0364423 L2.47272727,16.0364423 C3.49090909,16.0364423 4.50909091,15.1657028 4.65454545,14.1498401 C5.38181818,8.49003326 10.3272727,4.42658222 16,4.42658222 Z" id="spinner" class="spinner"></path>
    <path d="M16,0.0728846708 C7.12727273,0.0728846708 0,7.18392399 0,16.0364423 C0,24.8889607 7.12727273,32 16,32 C24.8727273,32 32,24.8889607 32,16.0364423 C32,7.18392399 24.8727273,0.0728846708 16,0.0728846708 Z M16,27.6463025 C9.6,27.6463025 4.36363636,22.4218654 4.36363636,16.0364423 C4.36363636,9.65101927 9.6,4.42658222 16,4.42658222 C22.4,4.42658222 27.6363636,9.65101927 27.6363636,16.0364423 C27.6363636,22.4218654 22.4,27.6463025 16,27.6463025 Z" id="circle" class="ring" opacity="0.25"></path>
    </g>
</svg>

cssanimationsvglinear-gradients

Answer №1

To achieve this effect, you can utilize a mask where all shapes are placed into the mask and then applied to a rectangle with a gradient fill.

In order to streamline the code, I swapped out the two paths creating the spinner with two circles.

.spinner {
  transform-origin: center;
  animation: spinner_StKS 0.75s infinite linear;
}

.ring,
.bell {}

@keyframes spinner_StKS {
  100% {
    transform: rotate(360deg);
  }
}
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="blue" />
    </linearGradient>
    <mask id="m1">
      <g id="bell" fill="white" transform="translate(8.000000, 7.050223)" class="bell">
        <path d="M15.8842999,14.4638359 C14.9360423,12.930403 14.4236902,11.1769083 14.4002435,9.38474047 L14.4002435,6.2627564 C14.4002435,2.80393155 11.5347569,1.77635684e-15 8,1.77635684e-15 C4.46524313,1.77635684e-15 1.59975652,2.80393155 1.59975652,6.2627564 L1.59975652,9.3800434 C1.5771244,11.1738044 1.06474385,12.9290182 0.115700067,14.4638359 C-0.0338774353,14.7055293 -0.0387448115,15.0073403 0.102964457,15.2535317 C0.244673725,15.4997232 0.510966493,15.6521939 0.799726089,15.6521939 L15.2002739,15.6521939 C15.4890335,15.6521939 15.7553263,15.4997232 15.8970355,15.2535317 C16.0387448,15.0073403 16.0338774,14.7055293 15.8842999,14.4638359 Z" id="Path"></path>
        <path d="M8.80563065,17.8637298 C9.48463281,17.6269821 10.018941,17.1041517 10.260886,16.4397355 L5.73911399,16.4397355 C5.95277088,17.026486 6.39588476,17.5061499 6.97097137,17.7732021 C7.54605798,18.0402543 8.20600694,18.0728182 8.80563065,17.8637298 Z" id="Path"></path>
      </g>
      <g stroke="white" stroke-width="4.6" fill="none">
      <circle cx="16" cy="16" r="13.7" class="spinner"
        stroke-dasharray="40 100" pathLength="100" stroke-linecap="round"/></circle>
      <circle cx="16" cy="16" r="13.7" opacity="0.25"/></circle>
      </g>
    </mask>
  </defs>
  <rect width="32" height="32" fill="url(#gradient)" mask="url(#m1)"/></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

Ionic 4: Facing issues with setting complete background image on ion-card

https://i.stack.imgur.com/3lH6h.png I'm currently attempting to set a background image for an Ion-card in order to completely cover the card's area. However, I'm facing an issue where the background image does not cover the entire area and ...

cssangularionic-frameworkionic4

Is the second parameter of the function being used as a condition?

Why is it necessary to validate the helpText argument within the function to be non-equative to null when its ID is linked with the span tag? The functions task is to set and clear help messages in the form field using built-in CSS classes. <input id ...

javascripthtmlcssformsif-statement

The size of the image remains as is and does not adjust in

For some reason, my image is not adjusting its size properly. Despite searching online for solutions, I have been unable to resolve the issue. According to W3schools, I should set it up like this using the formular-banner class. .formular-banner { ...

htmlcssresponsive-design

Leveraging CSS keyframes to create dynamic animations

I am facing an issue with CSS while designing my website. I reached out to the plugin developer for help through a ticket submission, but unfortunately, I have not received a response yet. On my homepage at , I have utilized CSS keyframes to create a text ...

csseffectkeyframe

Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcss

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

This snippet shows a MySQL query being used to update and insert data into a database: if ($_POST["ok"] == "OK") { $updateSQL = sprintf("UPDATE attend SET at_status=%s, at_remarks=%s WHERE at_tt_idx=%s", GetSQLValueString ...

javascriptphpjquerymysqlcss

By default, use jQuery to load the content of a div

Upon page load, I am looking to display the content within #destiny2. This section includes text and images, as well as additional content for three categories. Initially, the first category should be shown without requiring a click. Subsequently, clicking ...

javascriptjquerycss

Surprising <body> body movement caused by child's margin-top pushing it down

Whenever I come across HTML problems, they seem so simple that I almost feel silly asking about them. But here I am, clueless about why this issue is occurring. In the following fiddle http://jsfiddle.net/o5ee1oag/2/, the body is being pushed down by a 50 ...

htmlcssmargin

When text exceeds multiple lines, display an ellipsis to indicate overflow and wrap only at word boundaries

Here is an example snippet of my code: <div class="container"> <div class="item n1">Proe Schugaienz</div> <div class="item n2">Proe Schugaienz</div> </div> and I am using the following jQuery code: $(&apos ...

javascriptjquerycssmultilinedotdotdot

Refresh the CSS without having to reload the entire page

I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...

c#asp.netcssupdatepanel

Ensure that the headers of the table are in perfect alignment with the

Is there a way to create a table with fixed row headers so that column headings stay in place while scrolling? I've managed to achieve this, but now the table headers are not aligned properly with the rows below. I've also created a helpful jsfid ...

htmlcss

Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...

javascripthtmlcss

Content OverFlow: DropDown Menu is not overlapping the content, but rather pushing it downwards

In my webpage, I have a drop-down menu that traditionally pushes the content below it down to make space for its items. However, I want the drop-down to overlap the contents below without affecting their position. I've tried various solutions, such a ...

javascriptjquerycssdrop-down-menuxhtml

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

On a lengthy page with approximately 15 pages of text, I would like to insert a header at the beginning of each page when the document is printed by the user. Can this functionality be achieved using CSS or JavaScript/jQuery? ...

javascriptjquerycss

I'm looking to display images in a designated React component using create react app. What is the best way to accomplish

Currently in the process of revamping an older website using react. Making progress, but encountering an issue with a new component where images are not displaying. Strangely, the images appear in the main class but not within the component class. Even whe ...

cssreactjs

Incorporate a platform-specific button in a user interface with React Native

I need to display a button that is only shown on iOS, not on android. I have tried using the following style, but it doesn't seem to be working. ...Platform.select({ android: { display:'none', }, The code for my button is: <Bu ...

cssreact-native

JS custom scrollbar thumb size issues in relation to the scroll width of the element

I recently implemented a custom scrollbar for a component on my website. To determine the length of the scrollbar thumb, I use the formula viewportWidth / element.scrollWidth;. This provides me with a percentage value that I then apply to the thumb elemen ...

javascripthtmlcssreactjs

What is the process for including or excluding a class from a horizontal scrollbar?

I've been trying to implement a back to top button on a horizontally scrolling page. However, I'm encountering difficulties in adding or removing the necessary class to show or hide the button. Here's the JavaScript code I'm using: $( ...

javascriptjqueryhtmlcsshorizontal-scrolling

Placing a pair of labels onto a bootstrap form while ensuring column alignment

I'm trying to format a form according to my UI/UX specifications, where there is a parent label and two sub-labels. Can this be achieved using Bootstrap? https://i.stack.imgur.com/J8wJZ.png However, I'm struggling to align the columns and rows ...

htmlcsstwitter-bootstrapforms

The absence of color attribute in CSS serves as a safeguard against overriding

Issue Update: Upon pushing the application to the development server, ASP includes injected styles that are overriding the necessary custom styles. One specific example is a wrapper div with an 'a' tag that overrides all styled 'a' tags ...

css