htmlcsssvg

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, my two svg files, and my HTML code.

enter image description here

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>

UPDATE 9/26: I edited this part of the CSS:

.headoutline {
   z-index: 2;
   position: relative; margin
  width: 100%; 
  height: 100%; 
}

And now the svgs are closer. But the outline still won't cover the whole colored oval... enter image description here

Solution

  • Instead of using <object> for each SVG you can use the <image> element inside a SVG element.

    Here, I included the two SVG as data URIs, but this can of course be replaced by a URL to the right SVG.

    .head {
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0); /* Starting position */
    }
    50% {
        transform: translateY(-5px); /* Float up by 10 pixels */
    }
}
    <div class="head">
  <svg xmlns="http://www.w3.org/2000/svg" width="150" height="90">
    <image href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6ZmZkZWM9Imh0dHBzOi8vd3d3LmZyZWUtZGVjb21waWxlci5jb20vZmxhc2giIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmZmRlYzpvYmplY3RUeXBlPSJzaGFwZSIgaGVpZ2h0PSI5MC4wcHgiIHdpZHRoPSIxNTAuMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMCwgMC4wLCAwLjAsIDEuMCwgNzUuMCwgNDUuMCkiPgogICAgPHBhdGggZD0iTTc1LjAgMC4wIFE3NS4wIDE4LjY1IDUzLjAgMzEuOCAzMS4wNSA0NS4wIDAuMCA0NS4wIC0zMS4wNSA0NS4wIC01My4wNSAzMS44IC03NS4wIDE4LjY1IC03NS4wIDAuMCAtNzUuMCAtMTguNjUgLTUzLjA1IC0zMS44NSAtMzEuMDUgLTQ1LjAgMC4wIC00NS4wIDMxLjA1IC00NS4wIDUzLjAgLTMxLjg1IDc1LjAgLTE4LjY1IDc1LjAgMC4wIiBmaWxsPSIjZmZjYzY2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIvPgogIDwvZz4KPC9zdmc+" />
    <image href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6ZmZkZWM9Imh0dHBzOi8vd3d3LmZyZWUtZGVjb21waWxlci5jb20vZmxhc2giIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmZmRlYzpvYmplY3RUeXBlPSJzaGFwZSIgaGVpZ2h0PSI5MC4wcHgiIHdpZHRoPSIxNTAuMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMCwgMC4wLCAwLjAsIDEuMCwgNzUuMCwgNDUuMCkiPgogICAgPHBhdGggZD0iTTUzLjAgLTMxLjg1IFE3NS4wIC0xOC42NSA3NS4wIDAuMCA3NS4wIDE4LjY1IDUzLjAgMzEuOCAzMS4wNSA0NS4wIDAuMCA0NS4wIC0zMS4wNSA0NS4wIC01My4wNSAzMS44IC03NS4wIDE4LjY1IC03NS4wIDAuMCAtNzUuMCAtMTguNjUgLTUzLjA1IC0zMS44NSAtMzEuMDUgLTQ1LjAgMC4wIC00NS4wIDMxLjA1IC00NS4wIDUzLjAgLTMxLjg1IE01MS4wNSAtMjkuOSBRMjkuOSAtNDIuMjUgMC4wIC00Mi4yNSAtMjkuOSAtNDIuMjUgLTUxLjA1IC0yOS45IC03Mi4yIC0xNy41IC03Mi4yIDAuMCAtNzIuMiAxNy41IC01MS4wNSAyOS44NSAtMjkuOSA0Mi4yNSAwLjAgNDIuMjUgMjkuOSA0Mi4yNSA1MS4wNSAyOS44NSA3Mi4yIDE3LjUgNzIuMiAwLjAgNzIuMiAtMTcuNSA1MS4wNSAtMjkuOSIgZmlsbD0iIzAwMDAwMCIgZmlsbC1vcGFjaXR5PSIwLjQ5ODAzOTIyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIvPgogIDwvZz4KPC9zdmc+"/>
  </svg>
</div>