I have two SVG files, they are a transparent outlined oval and a colored oval without an outline. I want to cover the colored oval completely with the transparent outlined oval, but it keeps on not aligning with the sides of the oval. Here’s my CSS code and the result:
.character {
position: relative;
width: 200px; /* Adjust the size as needed */
height: 400px; /* Adjust the size as needed */
}
.part {
position: absolute;
}
.head {
animation: float 2s ease-in-out infinite;
}
.headcolor {
z-index: 1;
margin-top: -200px;
position: relative;
top: 0;
left: 0;
}
.headoutline {
z-index: 2;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes float {
0%, 100% {
transform: translateY(0); /* Starting position */
}
50% {
transform: translateY(-5px); /* Float up by 10 pixels */
}
}
Upon changing the margin-top of .headcolor to -500px, nothing changes:
And here is what my result is supposed to look like, my two svg files, and my HTML code.
https://svgshare.com/i/1Aqg.svg
https://svgshare.com/i/1ArY.svg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character Assembly</title>
<link rel="stylesheet" href="player.css">
</head>
<body>
<div class="character">
<!-- Outline SVG -->
<div class="head">
<object data="/svgs/head/shapes/9.svg" type="image/svg+xml" class="headoutline"></object>
<!-- Filling SVG -->
<object data="/svgs/head/shapes/7.svg" type="image/svg+xml" class="headcolor"></object>
</div>
<!-- <object data="body.svg" type="image/svg+xml" class="part body"></object>
<object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
<object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
<object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>
</div> -->
<script src="player.js"></script>
</body>
</html>
New contributor
user27361334 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
Why don’t you create it with css?
Here’s an example:
.oval {
width: 100px;
height: 50px;
background: wheat;
border: 1px solid red;
border-radius: 50%;
}<div class="oval"></div>