javascript - 我想将文本放入 SVG(youtube Logo )

Question

先生，我想在 svg 之后添加文本。通过使用 Windows 画图，文本应位于 SVG 图像之后的中心。我试着按照我想要的方式制作图像。我想把它放在我的网站上。

我不擅长css和html，请帮助我。例如。

我尝试遵循代码，但它不起作用。它将文本放在 SVG 下方，这是我不想要的。

对不起，我的英文太烂了。

<style>

.alert {
    padding: 20px;
    background-color: #f9f6f9;
    color: black;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}

.closebtn {
    margin-left: 15px;
    color: black;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
    
}

.closebtn:hover {
    color: blue;
}
</style>


<div class="alert">
  <span class="closebtn">&times;</span>  
 
  
  <svg     width="10%" height="10%" version="1.1" id="YouTube_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewbox="0 0 1024 721" enable-background="new 0 0 1024 721" xml:space="preserve">
     
     
  <a href="https://www.youtube.com/vedicaim">
     
<path id="Triangle" fill="#FFFFFF" d="M407,493l276-143L407,206V493z"/>
<path id="The_Sharpness" opacity="0.12" fill="#420000" enable-background="new    " d="M407,206l242,161.6l34-17.6L407,206z"/>
<g id="Lozenge">
	<g>
		
			<lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="512.5" y1="719.7" x2="512.5" y2="1.2" gradienttransform="matrix(1 0 0 -1 0 721)">
			<stop  offset="0" style="stop-color:#E52D27"/>
			<stop  offset="1" style="stop-color:#BF171D"/>
		</stop></stop></lineargradient>
		<path fill="url(#SVGID_1_)" d="M1013,156.3c0,0-10-70.4-40.6-101.4C933.6,14.2,890,14,870.1,11.6C727.1,1.3,512.7,1.3,512.7,1.3
			h-0.4c0,0-214.4,0-357.4,10.3C135,14,91.4,14.2,52.6,54.9C22,85.9,12,156.3,12,156.3S1.8,238.9,1.8,321.6v77.5
			C1.8,481.8,12,564.4,12,564.4s10,70.4,40.6,101.4c38.9,40.7,89.9,39.4,112.6,43.7c81.7,7.8,347.3,10.3,347.3,10.3
			s214.6-0.3,357.6-10.7c20-2.4,63.5-2.6,102.3-43.3c30.6-31,40.6-101.4,40.6-101.4s10.2-82.7,10.2-165.3v-77.5
			C1023.2,238.9,1013,156.3,1013,156.3z M407,493V206l276,144L407,493z"/>
	</path></g>
</g>
</path></path></a>
</svg>
  

  <strong>Subscribe!</strong> to our <a href="https://www.youtube.com/xyz">YouTube channel</a>

</div>

<script>
var close = document.getElementsByClassName("closebtn");
var i;

for (i = 0; i < close.length; i++) {
    close[i].onclick = function(){
        var div = this.parentElement;
        div.style.opacity = "0";
        setTimeout(function(){ div.style.display = "none"; }, 600);
    }
}
</script>

Answer 1

尝试使用 flexbox!您可以使用此方法轻松地使元素垂直居中:

我在你想要居中的元素周围添加了一个 wrapper 并添加了 display:flex 和 align-items: center 到它，产生你想要的布局。

这是一个演示:

.wrapper {
  display: flex;
  align-items: center;
}

.wrapper strong {
  padding-left: 15px;
}

<style>
  .alert {
    padding: 20px;
    background-color: #f9f6f9;
    color: black;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
  }
  
  .closebtn {
    margin-left: 15px;
    color: black;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .closebtn:hover {
    color: blue;
  }
</style>


<div class="alert">
  <span class="closebtn">&times;</span>

  <div class="wrapper">
    <svg width="10%" height="10%" version="1.1" id="YouTube_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1024 721" enable-background="new 0 0 1024 721" xml:space="preserve">
     
     
  <a href="https://www.youtube.com/xyz">
     
<path id="Triangle" fill="#FFFFFF" d="M407,493l276-143L407,206V493z"/>
<path id="The_Sharpness" opacity="0.12" fill="#420000" enable-background="new    " d="M407,206l242,161.6l34-17.6L407,206z"/>
<g id="Lozenge">
	<g>
		
			<lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="512.5" y1="719.7" x2="512.5" y2="1.2" gradienttransform="matrix(1 0 0 -1 0 721)">
			<stop  offset="0" style="stop-color:#E52D27"/>
			<stop  offset="1" style="stop-color:#BF171D"/>
		</stop></stop></lineargradient>
		<path fill="url(#SVGID_1_)" d="M1013,156.3c0,0-10-70.4-40.6-101.4C933.6,14.2,890,14,870.1,11.6C727.1,1.3,512.7,1.3,512.7,1.3
			h-0.4c0,0-214.4,0-357.4,10.3C135,14,91.4,14.2,52.6,54.9C22,85.9,12,156.3,12,156.3S1.8,238.9,1.8,321.6v77.5
			C1.8,481.8,12,564.4,12,564.4s10,70.4,40.6,101.4c38.9,40.7,89.9,39.4,112.6,43.7c81.7,7.8,347.3,10.3,347.3,10.3
			s214.6-0.3,357.6-10.7c20-2.4,63.5-2.6,102.3-43.3c30.6-31,40.6-101.4,40.6-101.4s10.2-82.7,10.2-165.3v-77.5
			C1023.2,238.9,1013,156.3,1013,156.3z M407,493V206l276,144L407,493z"/>
	</path></g>
</g>
</path></path></a>
</svg>


    <strong>Subscribe!</strong> to our <a href="https://www.youtube.com/vedicaim">YouTube channel</a>
  </div>
</div>

<script>
  var close = document.getElementsByClassName("closebtn");
  var i;

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.opacity = "0";
      setTimeout(function() {
        div.style.display = "none";
      }, 600);
    }
  }
</script>