Ich möchte Text in SVG setzen (Youtube-Logo)

Sir, ich möchte Text nach der Svg. Der Text sollte nach dem SVG-Bild in der Mitte liegen, indem Sie windows paint verwenden. Ich versuche ein Bild genau so zu machen, wie ich es möchte. Ich möchte es auf meiner Website setzen.Ich möchte Text in SVG setzen (Youtube-Logo)

Ich bin nicht gut in CSS und HTML, bitte helfen Sie mir. Zum Beispiel.

Ich versuche Code folgenden, aber es funktioniert nicht. Es wird Text unterhalb des SVG eingefügt, was ich nicht möchte.

Sorry Mein Englisch ist zu schlecht.

<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" 
 
\t 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"> 
 
\t <g> 
 
\t \t 
 
\t \t \t <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)"> 
 
\t \t \t <stop offset="0" style="stop-color:#E52D27"/> 
 
\t \t \t <stop offset="1" style="stop-color:#BF171D"/> 
 
\t \t </stop></stop></lineargradient> 
 
\t \t <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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t C1023.2,238.9,1013,156.3,1013,156.3z M407,493V206l276,144L407,493z"/> 
 
\t </path></g> 
 
</g> 
 
</path></path></a> 
 
</svg> 
 
    
 

 
    <strong>Subscribe!</strong> to our <a href="https://www.youtube.com/vedicaim">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>

Quelle

2017-12-13 Vedic Aim

Versuchen flexbox mit! Sie können leicht vertikal Elemente Zentrum dieser Methode:

ich eine wrapper um die Elemente hinzugefügt Sie zentriert und hinzugefügt werden soll display:flex und align-items: center darauf, was zu dem Layout, das Sie möchten.

Hier ist eine Demonstration:

.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/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"> 
 
\t <g> 
 
\t \t 
 
\t \t \t <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)"> 
 
\t \t \t <stop offset="0" style="stop-color:#E52D27"/> 
 
\t \t \t <stop offset="1" style="stop-color:#BF171D"/> 
 
\t \t </stop></stop></lineargradient> 
 
\t \t <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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t C1023.2,238.9,1013,156.3,1013,156.3z M407,493V206l276,144L407,493z"/> 
 
\t </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>

Quelle

2017-12-13 10:09:38 Maharkus

Der traditionelle Weg ist mit vertical-align: middle.

* Beachten Sie, dass Sie in Ihrem SVG auch eine Reihe von Stray-Closing-Tags haben. Es gibt zusätzliche </stop> und </path> Tags.

Auch <lineargradient> sollte technisch <linearGradient> sein.

<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; 
 
} 
 

 
.alert svg { 
 
    vertical-align: middle; 
 
} 
 

 
</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" 
 
\t 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"> 
 
\t <g> 
 
\t \t 
 
\t \t \t <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)"> 
 
\t \t \t <stop offset="0" style="stop-color:#E52D27"/> 
 
\t \t \t <stop offset="1" style="stop-color:#BF171D"/> 
 
\t \t </lineargradient> 
 
\t \t <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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t C1023.2,238.9,1013,156.3,1013,156.3z M407,493V206l276,144L407,493z"/> 
 
\t </g> 
 
</g> 
 
</a> 
 
</svg> 
 
    
 
<span class="alert-msg"> 
 
    <strong>Subscribe!</strong> to our <a href="https://www.youtube.com/vedicaim">YouTube channel</a> 
 
</span> 
 

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

Quelle

2017-12-13 13:29:59

Ich möchte Text in SVG setzen (Youtube-Logo)

Antwort

Verwandte Themen