Question 408733 in Html Question posted in
Some basic documentation can be found here.

Html – Putting an object in front of another one (and covering the whole other object)

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 */
    }
}

enter image description here

Upon changing the margin-top of .headcolor to -500px, nothing changes:

enter image description here

And here is what my result is supposed to look like, and my HTML code.

enter image description here

<!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>
Tags:

2

Answers


  1. 0

    [class*="EditableArea"] h1:last-child, [class*="EditableArea"] h2:last-child, [class*="EditableArea"] h3:last-child, [class*="EditableArea"] h4:last-child, [class*="EditableArea"] h5:last-child, [class*="EditableArea"] h6:last-child, [class*="EditableArea"] p:last-child, [class*="EditableArea"] ul:last-child, [class*="EditableArea"] ol:last-child, [class*="EditableArea"] form:last-child, [class*="EditableArea"] blockquote:last-child, [class*="EditableArea"] dl:last-child, [class*="EditableArea"] pre:last-child

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search