How to fill rect inside rect in svg?
Question
I try to do this in svg:
The colors doesn't matters, only the shape.
So I use tool from create-content-loader which provide me svg with animation.
The problem is I can't do the white rect inside the big rect. I unable to change the color - whatever I try.
I try to do to first and second rect:
<rect style="fill:#fff" x="0" y="89" rx="3" ry="3" width="67" height="7" />
or
<rect fill="#fff" x="0" y="89" rx="3" ry="3" width="67" height="7" />
not works. what I have to do to make it work?
<svg role="img" width="170" height="110" aria-labelledby="loading-aria" viewBox="0 0 165 110" preserveAspectRatio="none" > <title id="loading-aria">Loading...</title> <rect x="0" y="0" width="100%" height="100%" clip-path="url(#clip-path)" style='fill: url("#fill");' ></rect> <defs> <clipPath id="clip-path"> <rect x="0" y="89" rx="3" ry="3" width="67" height="9" /> <rect x="0" y="100" rx="3" ry="3" width="83" height="9" /> <rect x="0" y="2" rx="3" ry="3" width="151" height="83" /> </clipPath> <linearGradient id="fill"> <stop offset="0.599964" stop-color="#f3f3f3" stop-opacity="1" > <animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> <stop offset="1.59996" stop-color="#ecebeb" stop-opacity="1" > <animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> <stop offset="2.59996" stop-color="#f3f3f3" stop-opacity="1" > <animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> </linearGradient> </defs> </svg>
1 answers
solution1
1 ACCPTED 2020-03-14 18:25:20
I hope, This will work for you.
#outerBox { z-index:-1; fill:#f00; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <svg role="img" width="180" height="120" aria-labelledby="loading-aria" viewBox="0 0 180 120" preserveAspectRatio="none" > <title id="loading-aria">Loading...</title> <rect x="0" y="0" width="100%" height="100%" rx="3" ry="3" id="outerBox" style='fill: url("#fill2");' ></rect> <rect x="0" y="0" width="100%" height="100%" clip-path="url(#clip-path)" style='fill: url("#fill");' ></rect> <defs> <clipPath id="clip-path"> <rect x="10" y="89" rx="3" ry="3" width="67" height="9" /> <rect x="10" y="100" rx="3" ry="3" width="83" height="9" /> </clipPath> <linearGradient id="fill"> <stop offset="0.599964" stop-color="#f3f3f3" stop-opacity="1" > <animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> <stop offset="1.59996" stop-color="#ecebeb" stop-opacity="1" > <animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> <stop offset="2.59996" stop-color="#f3f3f3" stop-opacity="1" > <animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> </linearGradient> <linearGradient id="fill2"> <stop offset="0.599964" stop-color="#ff0000" stop-opacity="1" > <animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> <stop offset="1.59996" stop-color="#ecebeb" stop-opacity="1" > <animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> <stop offset="2.59996" stop-color="#ff0000" stop-opacity="1" > <animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite" ></animate> </stop> </linearGradient> </defs> </svg> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to set fill color for svg rect
svg rect multiple fill colors
How to animate SVG rect to fill from bottom to top?
Rect doesn't fill svg's width
SVG <rect> with text and div fill width with transition
SVG Rect positioning inside div is incorrect
Dynamically create rect inside svg based on data
Resizing SVG rect elements inside G tag
Overlapping a colored rect with transparent path in a svg / breaking rect fill color on the intersection with a path
How to display the text over svg rect in Javascript
Related Tags