How to animate a rectangle and label in svg or css? (smooth split color animation)
0
I want to animate a rectangle based on some percentage to smoothly split into 2 colors and at the same time the percentages to increase/decrease in the label like in the one below:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2165.4 1686.6" style="enable-background:new 0 0 2165.4 1686.6;" xml:space="preserve">
<style type="text/css">
.st1 { fill: #54A4DB; }
.st2 { font-family: 'Helvetica'; }
.st3 { fill: #FFFFFF; }
.st4 { font-size: 40px; }
</style>
<rect id="zone5" x="670.4" y="773.2" class="st1" width="1192.8" height="150.2"/>
<text transform="matrix(1 0 0 1 1176.7595 860.7599)" class="st3 st2 st4">1.00/0.00</text>
</svg>For the split effect I thought, in the worst case, of using two rectangles and animate one of them using
<animate attributeName="width" from="0" to="1192.8" dur="3s" fill="freeze"/>
but I much appreciate any other simpler method, if there is one.
But for the label I don't have any idea how to smoothly change the value from one to the other
css svg
edited Dec 31 '18 at 21:27
MTCoster
3,77122141
asked Dec 31 '18 at 21:18
Daniel T.Daniel T.
177
add a comment |
0
I want to animate a rectangle based on some percentage to smoothly split into 2 colors and at the same time the percentages to increase/decrease in the label like in the one below:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2165.4 1686.6" style="enable-background:new 0 0 2165.4 1686.6;" xml:space="preserve">
<style type="text/css">
.st1 { fill: #54A4DB; }
.st2 { font-family: 'Helvetica'; }
.st3 { fill: #FFFFFF; }
.st4 { font-size: 40px; }
</style>
<rect id="zone5" x="670.4" y="773.2" class="st1" width="1192.8" height="150.2"/>
<text transform="matrix(1 0 0 1 1176.7595 860.7599)" class="st3 st2 st4">1.00/0.00</text>
</svg>For the split effect I thought, in the worst case, of using two rectangles and animate one of them using
<animate attributeName="width" from="0" to="1192.8" dur="3s" fill="freeze"/>
but I much appreciate any other simpler method, if there is one.
But for the label I don't have any idea how to smoothly change the value from one to the other
css svg
edited Dec 31 '18 at 21:27
MTCoster
3,77122141
asked Dec 31 '18 at 21:18
Daniel T.Daniel T.
177
in other words you want to create a progress bar?
– Temani Afif
Dec 31 '18 at 21:28
Yes, I suppose it is the same thing :)
– Daniel T.
Dec 31 '18 at 21:31
in this case you will find a ton of examples in the net
– Temani Afif
Dec 31 '18 at 21:37
add a comment |
0
0
0
I want to animate a rectangle based on some percentage to smoothly split into 2 colors and at the same time the percentages to increase/decrease in the label like in the one below:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2165.4 1686.6" style="enable-background:new 0 0 2165.4 1686.6;" xml:space="preserve">
<style type="text/css">
.st1 { fill: #54A4DB; }
.st2 { font-family: 'Helvetica'; }
.st3 { fill: #FFFFFF; }
.st4 { font-size: 40px; }
</style>
<rect id="zone5" x="670.4" y="773.2" class="st1" width="1192.8" height="150.2"/>
<text transform="matrix(1 0 0 1 1176.7595 860.7599)" class="st3 st2 st4">1.00/0.00</text>
</svg>For the split effect I thought, in the worst case, of using two rectangles and animate one of them using
<animate attributeName="width" from="0" to="1192.8" dur="3s" fill="freeze"/>
but I much appreciate any other simpler method, if there is one.
But for the label I don't have any idea how to smoothly change the value from one to the other
css svg
edited Dec 31 '18 at 21:27
MTCoster
3,77122141
asked Dec 31 '18 at 21:18
Daniel T.Daniel T.
177
I want to animate a rectangle based on some percentage to smoothly split into 2 colors and at the same time the percentages to increase/decrease in the label like in the one below:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2165.4 1686.6" style="enable-background:new 0 0 2165.4 1686.6;" xml:space="preserve">
<style type="text/css">
.st1 { fill: #54A4DB; }
.st2 { font-family: 'Helvetica'; }
.st3 { fill: #FFFFFF; }
.st4 { font-size: 40px; }
</style>
<rect id="zone5" x="670.4" y="773.2" class="st1" width="1192.8" height="150.2"/>
<text transform="matrix(1 0 0 1 1176.7595 860.7599)" class="st3 st2 st4">1.00/0.00</text>
</svg>For the split effect I thought, in the worst case, of using two rectangles and animate one of them using
<animate attributeName="width" from="0" to="1192.8" dur="3s" fill="freeze"/>
but I much appreciate any other simpler method, if there is one.
But for the label I don't have any idea how to smoothly change the value from one to the other
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2165.4 1686.6" style="enable-background:new 0 0 2165.4 1686.6;" xml:space="preserve">
<style type="text/css">
.st1 { fill: #54A4DB; }
.st2 { font-family: 'Helvetica'; }
.st3 { fill: #FFFFFF; }
.st4 { font-size: 40px; }
</style>
<rect id="zone5" x="670.4" y="773.2" class="st1" width="1192.8" height="150.2"/>
<text transform="matrix(1 0 0 1 1176.7595 860.7599)" class="st3 st2 st4">1.00/0.00</text>
</svg><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2165.4 1686.6" style="enable-background:new 0 0 2165.4 1686.6;" xml:space="preserve">
<style type="text/css">
.st1 { fill: #54A4DB; }
.st2 { font-family: 'Helvetica'; }
.st3 { fill: #FFFFFF; }
.st4 { font-size: 40px; }
</style>
<rect id="zone5" x="670.4" y="773.2" class="st1" width="1192.8" height="150.2"/>
<text transform="matrix(1 0 0 1 1176.7595 860.7599)" class="st3 st2 st4">1.00/0.00</text>
</svg>css svg
css svg
edited Dec 31 '18 at 21:27
MTCoster
3,77122141
asked Dec 31 '18 at 21:18
Daniel T.Daniel T.
177
edited Dec 31 '18 at 21:27
MTCoster
3,77122141
asked Dec 31 '18 at 21:18
Daniel T.Daniel T.
177
edited Dec 31 '18 at 21:27
MTCoster
3,77122141
edited Dec 31 '18 at 21:27
MTCoster
3,77122141
edited Dec 31 '18 at 21:27
MTCoster
3,77122141
3,77122141
asked Dec 31 '18 at 21:18
Daniel T.Daniel T.
177
asked Dec 31 '18 at 21:18
Daniel T.Daniel T.
177
asked Dec 31 '18 at 21:18
Daniel T.Daniel T.
177
177
in other words you want to create a progress bar?
– Temani Afif
Dec 31 '18 at 21:28
Yes, I suppose it is the same thing :)
– Daniel T.
Dec 31 '18 at 21:31
in this case you will find a ton of examples in the net
– Temani Afif
Dec 31 '18 at 21:37
add a comment |
in other words you want to create a progress bar?
– Temani Afif
Dec 31 '18 at 21:28
Yes, I suppose it is the same thing :)
– Daniel T.
Dec 31 '18 at 21:31
in this case you will find a ton of examples in the net
– Temani Afif
Dec 31 '18 at 21:37
in other words you want to create a progress bar?
– Temani Afif
Dec 31 '18 at 21:28
in other words you want to create a progress bar?
– Temani Afif
Dec 31 '18 at 21:28
Yes, I suppose it is the same thing :)
– Daniel T.
Dec 31 '18 at 21:31
Yes, I suppose it is the same thing :)
– Daniel T.
Dec 31 '18 at 21:31
in this case you will find a ton of examples in the net
– Temani Afif
Dec 31 '18 at 21:37
in this case you will find a ton of examples in the net
– Temani Afif
Dec 31 '18 at 21:37
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53991483%2fhow-to-animate-a-rectangle-and-label-in-svg-or-css-smooth-split-color-animatio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53991483%2fhow-to-animate-a-rectangle-and-label-in-svg-or-css-smooth-split-color-animatio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
in other words you want to create a progress bar?
– Temani Afif
Dec 31 '18 at 21:28
Yes, I suppose it is the same thing :)
– Daniel T.
Dec 31 '18 at 21:31
in this case you will find a ton of examples in the net
– Temani Afif
Dec 31 '18 at 21:37