SVG placement

I want to place this SVG, where hvcentered is located, how do I do this?

  <svg width="100" height="100" style="color:#E77D19;" viewbox="0 0 85 100">
    <path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
  </path></svg>
<style type="text/css">
#holder {
    width:260px;
    height:260px;
    border:3px solid red;
    position:relative;
}

.hvcentered {
    width:100px;
    height:50px;
    background-color:#00a0b0;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}
</style>

<div id="holder">
    <div class="hvcentered"></div>
</div>

Play with this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/i-want-to-replace-this-svg-where-hvcentered-is-located-how-do-i-do-this/277007
asasass
-->
    <style type="text/css">
.holder {
    width:120px;  /* Change this width and height. See that the triangle remains centered */
    height:120px;
    border:20px solid red;  /* Change this border width. See that the triangle remains centered */
    border-radius:50%;  /* Comment out to change the circle to a square.  See pos:abs left below */
    position:relative;
}
svg {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:24px;  /* Use this if the outer box is a circle */
/*    left:0;     /* Use this if the outer box is a square */
    margin:auto;
    outline:1px dashed blue;  /* TEST Outline. To Be DELETED */
}
    </style>
</head>
<body>

<div class="holder">
    <svg width="100" height="100" style="color:#E77D19;" viewbox="0 0 85 100">
        <path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
</div>

</body>
</html>
1 Like

How would I replicate this same exact svg using css format, without it being svg?

Code:

<svg style= "background-color:#cfc;" width="100" height="102" viewBox="0 -3 100 106"><path fill="currentColor" style="fill:black;stroke: orange; stroke-width:3px;" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path></svg>

I found this but border doesn’t work on it:

How come my code is centered, and yours isn't?

How would I get your code to be centered?

Your Code:

<style type="text/css">
  .holder {
    width: 266px;
    /* Change this width and height. See that the triangle remains centered */
    height: 266px;
    box-shadow: inset 0 0 0 3px #e77d19;
    /* Change this border width. See that the triangle remains centered */
    /* Comment out to change the circle to a square.  See pos:abs left below */
    position: relative;
  }
  
  svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 24px;
    /* Use this if the outer box is a circle */
    /*    left:0;     /* Use this if the outer box is a square */
    margin: auto;
    outline: 1px dashed blue;
    /* TEST Outline. To Be DELETED */
  }

</style>
</head>

<body>

  <div class="holder">
    <svg style="background-color:black;" width="100" height="106" viewBox="0 0 95 100">
      <path fill="currentColor" style="fill:#e77d19;  " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>
  </div>

</body>

</html>

Why do they show 2 different things?

My Button:

https://i.imgur.com/EuSLxqd.png

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: #000000; background-repeat: no-repeat; border: 3px solid #e77d19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#e77d19;"
  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'100\' height=\'100\' style=\'color:#e77d19; \' viewBox=\'0 0 16 14\'&gt;&lt;path fill=\'currentColor\' fill-rule=\'evenodd\' d=\'M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z\'&gt;&lt;/svg&gt;';
player.play();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #e77d19';
playButton2.style.backgroundImage = 'url(\'https://cdn.pbrd.co/images/fYRUBV4Ei.png\')';
} else {
playButton2.innerHTML = '&lt;svg width=\'100\' height=\'100\' style=\'color:#e77d19; \' viewBox=\'0 0 16 14\'&gt;&lt;path fill=\'currentColor\' fill-rule=\'evenodd\' d=\'M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z\'&gt;&lt;/svg&gt;';
player.pause();
playButton2.style.border='none';
playButton2.style.boxShadow='inset 0 0 0 3px #e77d19';
playButton2.style.backgroundImage = 'url(\'https://cdn.pbrd.co/images/fYRUBV4Ei.png\')';
}">
<svg style="background-color:red;" width="100" height="106" viewBox="0 0 95 100">
 <path fill="currentColor" style="fill:#e77d19; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>

</button>



<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg' />
  </source>
</audio>

Never mind, I spoke too soon.

/* left:0; /* Use this if the outer box is a square */

1 Like

Placing an SVG inside another SVG

Both Codes

<svg width="64" height="64" style="background-color:black;" viewBox="25 9 50 82">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="gray" />

<svg viewBox="0 0 1229 1481" width="24" height="29" style="background-color:green;">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
</svg>

</svg>

The Play sign seems stuck on the top left corner, how come?

How do I do that with the above code?

It works with the below code.

Example:


<svg class="initial" width="266" height="266" style="background-color:black;" viewBox="0 0 266 266">
<line x1="266" y1="2" x2="0" y2="2" style="stroke: #0059dd; stroke-width: 4;" />
<line x1="264" y1="0" x2="264" y2="266" style="stroke: #0059dd;stroke-width: 4; " />
<line x1="266" y1="264" x2="0" y2="264" style="stroke: #0059dd ; stroke-width: 4;" />
<line x1="2" y1="266" x2="2" y2="0" style="stroke:#0059dd;stroke-width: 4; " />
<line x1="0" y1="0" x2="266" y2="266" style="stroke:#0059dd; stroke-width:4" />
<line x1="0" y1="266" x2="266" y2="0" style="stroke:#0059dd; stroke-width:4" />

<svg width="100%" height="100%" viewBox="-2 -3 22 20"><path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="green" fill-rule="evenodd"></path></svg>
</svg>

Got it. By Setting x and y


<svg width="64" height="64" style="background-color:black;" viewBox="25 9 50 82">
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="gray" />

<svg viewBox="0 0 1229 1481" width="24" height="29" x="40px" y="35px" >
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
</svg>

</svg>
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.