I am looking to add color to an SVG image rather than using a progress bar. This will be used for an animated infographic.
Slowly fill the image below with green color to indicate it is 30% "full".<br>
<img src="https://cdn.mediacru.sh/P-WOGKdNDiGT.svg" width="700px">You can experiment with this code here: http://jsfiddle.net/47ayquwq/4/
If you want to achieve this effect, you can create an animation using a mask or filter. The fakeSMIL library is a great tool for polyfilling in Internet Explorer. Here is an example using a filter:
<svg width="800px" height="400px">
<defs>
<filter id="green-fill" x="0%" y="0%">
<feFlood flood-color="green"/>
<feOffset dy="210">
<animate attributeName="dy" from="300" to="210" dur="2s"/>
</feOffset>
<feComposite operator="in" in2="SourceGraphic"/>
<feComposite operator="over" in2="SourceGraphic"/>
</filter>
</defs>
<image filter="url(#green-fill)" xlink:href="https://cdn.mediacru.sh/P-WOGKdNDiGT.svg" height="400" width="700" />
</svg>To achieve a unique visual effect, you can create a rectangular progress bar and then apply an SVG mask to it. However, please note that this method may not be compatible with Internet Explorer due to lack of support for CSS Masks.
Alternatively, you can follow a similar approach but utilize an SVG <mask> or <clipPath> element instead of CSS Masks. There are numerous resources available on utilizing these elements effectively. This alternative method will also function smoothly on IE9+.
.progress {
position: relative;
background-color: green;
-webkit-mask: url(https://cdn.mediacru.sh/P-WOGKdNDiGT.svg) top left / cover;
}
/* IMG is just here for the size */
.progress IMG {
visibility: hidden;
}
/* We expose the green by moving the LHS of the "background" grey */
.progress-bg {
background-color: gray;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-animation-duration: 1s;
-webkit-animation-name: to30percent;
-webkit-animation-fill-mode: forwards;
animation-duration: 1s;
animation-name: to30percent;
animation-fill-mode: forwards;
}
@-webkit-keyframes to30percent {
from { left: 0%; }
to { left: 30%; }
}
@keyframes to30percent {
from { left: 0%; }
to { left: 30%; }
}<div class="progress">
<img src="https://cdn.mediacru.sh/P-WOGKdNDiGT.svg" width="700px"/>
<div class="progress-bg"></div>
</div>This setup includes a division with a green background and a grey div overlay representing the progress bar's background. By adjusting the "left" property of the grey div, we simulate the progress percentage visually. The entire design is then masked using our SVG element.
In the case that your svg consists of basic text or simple shapes, consider animating directly within the svg (such as using a gradient). To support Internet Explorer, you may need to incorporate the fakeSMIL library or utilize JavaScript for animation.
For instance:
svg {
height: 500px;
width: 100%;
}
text {
font: 220px Arial;
font-weight: bold;
fill:
url(#gradient);
}<svg>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#aaa" offset="0" />
<stop stop-color="#aaa" offset="1">
<animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
</stop>
<stop stop-color="green" offset="1">
<animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
</stop>
<stop stop-color="green" offset="1" />
</linearGradient>
</defs>
<text y="1em">HELLO</text>
</svg>Chapter One <button class="btn btn-outline-primary btn-sm btn-block " >Place order</button> Chapter Two <button class="simplepicker-btn" >Show Date Picker</button> > <script> > let simplepicker = new SimpleP ...
After browsing through some posts on stackoverflow, I noticed that my website is not responding as expected. You can check out my site here: To troubleshoot, you can examine the source code and utilize Firebug to inspect the css and javascript being used ...
I am dealing with two arrays within my component arr1 = ["one", "two"] arr2 = ["one", "two"] Within my HTML, I am utilizing ngIf in the following manner *ngIf="!isEnabled && arr1 != arr2" The isEnabled condition functions as expected, however ...
I am currently working on a function in Angular 2 where I want to toggle the disabled attribute of an input tag upon button click. Right now, I can disable it once but I am looking to make it switch back and forth dynamically. Below is the HTML template c ...
Hey there! I'm looking to send data to PHP, receive the PHP result, and then display the result in an HTML div tag. Could you provide me with a sample code snippet for this? Thank you in advance and please excuse any mistakes in my English. ...
After creating a search modal triggered by jQuery to add the class -open to the main parent div #search-box, I encountered an issue where the #search-box would fade in but the input did not transform as expected. I am currently investigating why this is ha ...
Hey, I'm currently facing an issue with my update functionality. Below is the blade code snippet: <div class="form-group floating-label" id="role_colaboration1"> <select name="{{$role}}[]" id="role" class="form-control"> ...
Is it doable to set a height for an image in CSS, then detect this gradient using JS and double the width based on the height x2.25? Could this be achieved? ...
When I designed a webpage in Firefox, everything looked great. However, when I opened it in Internet Explorer and resized the window to less than maximum size, half of the main div disappeared under the footer. If you want to see the issue for yourself, v ...
I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods fro ...
Hey everyone, I need some help with a small issue in my project. For some reason, the console.log() function in my project is not returning any values. <script> $('#search-box<?=$x;?>').blur(function() { var val = $("#search ...
Encountered a 403 error when making an Ajax request in a Cakephp project. Despite having all permissions granted for the project directory in localhost (XAMPP). Error message: "Failed to load resource: the server responded with a status of 403 (Forbidde ...
On my frontend interface, I have an HTML checkbox input. I am curious about the best approach for styling the standard tickbox to make it more visually appealing. Perhaps using a slider-switch? I want to avoid individual browsers styling the checkbox dif ...
When attempting to perform an ajax call, I receive a JSON object as a response: { id: 6, success: "true" } The ajax call in question is the following: window.foobar = function(foo){ $.ajax({ url: "http://foobar.com/sites/foo/", ...
My concern revolves around the transform: scale property. I am trying to achieve a gradual zoom effect on my background when hovered over, without affecting the text content. I have omitted browser prefixes for brevity. Below is the CSS code: #cont-nl { ...
Is there a way to extract the inner text from HTML using HTMLAgilityPack in C#, excluding text within any <h1-6> tags? I prefer not to use Regular Expressions and stick to HTMLAgilityPack. This is my current approach: var document = new HtmlDocumen ...
Trying to design a promotion layout with an image on the left and text on the right. How can I center the text vertically to appear in the middle of the picture? Attempts using margin and vertical-align have not been successful. Also, why does the text di ...
When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work. I wonder if this issue is related to me using "content-max" to set the parent element's width and height? Here is a simplified version ...
Can a hyperlink button in Outlook emails be used to run PHP code? For instance, I've designed a computer request form that appears as follows: New Request When you select the "new request" button, it changes to indicate completion: Completed Reque ...
I am currently working on creating an ajax-form to validate the client-side server of my sign-up form. My goal is to have error messages displayed on the same page where they are triggered, without loading a separate page. Below is the code from my (sign ...