SVG - Various images displaying unique characteristics

Trying to create a visual graphic with two images, one representing an empty state and the other a filled state.

The challenge is determining how to adjust the width of only one image while keeping them the same height using a clip path.

For example, I want to change the red image's width from 100% to 80%. Here's a fiddle showcasing both images at 100%:

http://jsfiddle.net/q62aw1bk/

Code:

 <svg height="100%" width="100%">
         <image xlink:href="http://www.cebbra44.com/images/barra_verde.jpg" x="0" y="0" width="100%" height="100%"/>
         <image xlink:href="http://www.construtorafgs.com.br/img/bgs/barra_porcentagem_vermelha.png" x="0" y="0" width="100%" height="100%"/>
            <defs>
                 <clipPath id="theSVGPath">
                       <rect x="0" y="0" width="100%" height="100%"/>
                 </clipPath>
           </defs>
</svg>

Looking for suggestions on how to achieve this. Thank you!

Note: Changing the width of one image independently is not an option due to the use of the clip path.

htmlcsssvg

Answer №1

To customize the clip path for a specific image, simply assign a unique class attribute and adjust your CSS to target that particular image.

Check out the revised fiddle for an updated example.

(It's unnecessary to clip the entire SVG at 100% width and height, so we'll focus on clipping only the necessary image.)

Answer №2

Have you thought about utilizing simple rects and a gradient instead of images? This way, you can adjust the width directly without dealing with clip-paths.

<svg width="500px" height="100px">
  <defs>
    <linearGradient id="indicator-gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="hsl(0, 100%, 38%)"/>
      <stop offset="100%" stop-color="hsl(0, 100%, 31%)"/>
    </linearGradient>
  </defs>
  <rect x="2%" width="96%" height="100%" fill="hsl(78, 66%, 45%)"></rect>
  <rect y="25%" width="20%" height="50%" fill="url(#indicator-gradient)"></rect>
</svg>

(Additionally, there are performance benefits to using SVG elements over image resources as rendering SVG is faster and reduces the overall download size for clients.)

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

How to create a freeze panes feature like MS Excel using HTML and CSS

In my web application for iPad using Angular JS, HTML5, and CSS3, I'm facing a challenge with a large table that requires both horizontal and vertical scrolling, along with a "freeze-pane" feature similar to MS Excel. Currently, I've divided the ...

javascripthtmlexcelcss

Is there a way to hide a specific character within a span element as securely as a password input field using

Can I use CSS to mask a span character similar to an input type password? Are there any properties like type="password" for the span or a specific class in Bootstrap such as class="mask" that can achieve this effect? https://i.stack.imgur.com/b8WQ4.png ...

htmlcssbootstrap-4

Embedding a picture within a uniquely shaped container

I have multiple sets of skewed divs and I would like to include a separate image in each of them. However, when I attempt to insert an image, it also becomes skewed and distorted. Is there a way to prevent this from happening? Ideally, I want the images to ...

htmlcss

Attempting to connect CSS to an HTML document within a Django development project

Directories Here is a photo of my directories. I am currently trying to utilize sudokuStyle.css in sudoku_board.html, but for some reason it does not appear to be linking properly in my HTML file. Below is the code snippet from my head section: {% load st ...

htmlcssdjangoweb

Are there any real-world examples you can share of utilizing CSS 3D Transforms?

Can you provide any instances of CSS 3D Transforms being utilized in real-world projects besides and ? ...

csscss-transforms

Can a submit button be created that integrates both a radio button and submission functionality?

Is there a way to combine a radio button and submit button into one element for submitting the value just with a click? Currently, I have a radio button and a separate submit button in my code, but I want to streamline it. This is the current code snippet ...

htmlcssforms

Update the navigation logo while scrolling

My website has a scrolling navigation menu using Wordpress. The default logo color is green, but when the user scrolls, a white background appears. However, on specific screens, I need the initial logo to be white. I have managed to create an alternate na ...

javascriptphphtmlcsswordpress

Animating a div's width with CSS from left to right

My goal is to create an animation effect for two overlapping divs that will reveal or hide the text inside them. I want one div to animate from left to right while the other animates from right to left, creating a wiping effect where as one piece of text d ...

cssanimation

Looking to connect a dropdown to an icon that has the type "button"?

I am facing a challenge with an icon placed on a Twitter Bootstrap container. My goal is to click on this icon and have a dropdown menu appear, offering various options that link to different websites. Currently, I am able to display the dropdown menu, but ...

javascriptjqueryhtmlcsstwitter-bootstrap

The sticky sidebar feature in Bootstrap 4 is not functioning correctly as it scrolls with the page instead of

I'm trying to create a sticky right sidebar titled "Recent Posts in Category" on this page. I want it to stay fixed when the user scrolls down. Since Bootstrap 4 no longer supports the affix feature, I attempted to accomplish this using CSS. I came a ...

htmlcssbootstrap-4

Guide on sending a key to a text input field using JavaScript

How can I simulate sending a combination of keys (such as Ctrl+C or Alt+Shift) when the cursor enters an input text field using Javascript? I am not utilizing jQuery, but rather MS-Ajax. Is it achievable with MS-Ajax DOM? EDIT 1) Following @Ghostoy&apos ...

javascripthtmlajax

What are the steps to incorporate jQuery Mobile features into a simple webpage?

Recently, I utilized Adobe Dreamweaver CC 2014 to create a jQuery Mobile Webpage. While exploring its features, I discovered a unique capability within the jQuery Mobile Website. This particular webpage was connected to the necessary jQuery CDNs. What stoo ...

jqueryhtmljquery-mobiledreamweaver

Center the image and align the floated texts on each side horizontally

I've recently started learning about HTML and CSS, but I'm having trouble grasping one concept. My goal is to align two floating <p> elements on either side of a centered <img>. Here's an example of what I'm trying to achiev ...

htmlcss

Transform a button to function like a checkbox in Knockout JS

Essentially, I have implemented a feature on my website where a button changes its color from green to grey and vice versa when clicked, giving the illusion of turning on and off. Below is the JavaScript and HTML code for this button: <script> $(&ap ...

javascriptjqueryhtmlknockout.js

Configuration for secondary dependencies in Tailwind

As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects: If you’ve created your own set of components styled with Tailwin ...

javascriptcssnode.jstailwind-css

Proper syntax for SVG props in JSX

I have developed a small React component that primarily consists of an SVG being returned. My goal is to pass a fill color to the React component and have the SVG use this color. When calling the SVG component, I do so like this: <Icon fillColour="#f ...

javascriptreactjssvg

Tips for maintaining three image sliders in a single row in WordPress

Having three short codes displayed on my page, I am struggling to keep them on the same line. Is there a straightforward method to control the images, placing three per line? I have a CSS plugin that allows me to use DIV tags to assign a DIV for alignmen ...

jquerycsswordpress

AngularJS: Error encountered when trying to assign a value to a read-only property in the ng-submit directive

I've been working on a personal project to practice angularJS, but I've encountered a problem that seems unsolvable to me. The issue arises when I try to utilize the submitLogin() function in my LoginCtrl.js file upon form submission. An error m ...

javascripthtmlangularjs

Page rotates on hover effect with RotateY

How can I get an image to rotate on the Y axis when hovered over? My code works in -moz- but not in -webkit- or -o-. What am I missing? .spin-logo { height: 450px; margin: 0 auto; -moz-transition: transform 2000ms ease 0s; -o-animation: transfor ...

htmlcsstransform

Guide on how to dynamically add AJAX JSON array response to an HTML table

Hey! I need some advice on how to dynamically append a JSON Array response to an HTML table after submitting a form using AJAX. Here's the scenario: This is my form : <form id="myForm" method="POST"> <input type=" ...

javascripthtmlajax