Wie man Bild innerhalb Svg

umrundet Ich erstelle ein Bild innerhalb eines Svg, aber möchte es runden und fülle die Form (kleiner Kreis). Ich habe bereits Bild Runde in HTML-Bild-Tag mit Css-Stil, aber nicht wissen, wie ich es tun kann in der Seite ein Svg oder wenden Sie die gleichen CSS-Stil in Svg. Hier ist ein Code:Wie man Bild innerhalb Svg

<HTML> 
<HEAD> 
<style> 
.pic-circle-corner { 
display: block; 
width: 25px; 
height: 25px; 
/* margin: .8em auto; */ 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center center; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
border-radius: 50%; 
border: 5px ; /* solid #eee*/ 
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); 
} 

</style> 
</HEAD> 
<BODY> 
<div> picture should fill inside round shape.. 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="40px" height="40px" viewBox="0 0 40 40" enable- background="new 0 0 40 40" xml:space="preserve"> 
<filter id="this_image" x="0%" y="0%" width="100%" height="100%"> 
    <feImage width="28px" height="28px" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"/> 
</filter> 
<circle cx="46" cy="42" r="40" stroke="black" stroke-width="3" filter="url(#this_image)" /> 
<path fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979 
    c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197 
    c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261 
    c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793 
    c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815 
    c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517 
    c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318 
    c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/> 
</svg> 

</div> 
<div style="padding-top:50px;"> 
<image class="pic-circle-corner" src="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"> 
</div> 



    </BODY> 
    </HTML>

Kann mir jemand einen richtigen Weg sagen.

Quelle

2016-05-10 Anonymous

Clip das Bild eine clipPath verwendet, die einen Kreis-Element enthält. –

diese sind einige Optionen:

1) absolute Position - Ort der SVG-Pfad innerhalb eines Behälters und legen einen absoluten positioniert eingekreisten div mit einem Hintergrundbild auf dem Pfad.

HTML/SVG:

<div class="container"> 
    <div class="circle-div"> </div> 
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40"> 
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979 
     c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197 
     c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261 
     c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793 
     c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815 
     c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517 
     c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318 
     c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/> 
     </svg> 
</div>

CSS:

.container { 
    position: relative; 
} 

.circle-div { 
    border-radius: 50%; 
    background-image: url('http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg'); 
    width: 25px; 
    height: 25px; 
    background-size: cover; 
    background-position: 25% 25%; 
    position: absolute; 
    left: 7.5px; 
    top: 2.5px; 
}

2) SVG clipPath - Platz ein SVG-Bild auf den SVG-Pfad und Clip mit einem Kreis.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40"> 
    <defs> 
     <clipPath patternUnits="userSpaceOnUse" id="clip"> 
      <circle cx="50%" cy="40%" r="13" ></circle> 
     </clipPath> 
    </defs> 

     <image preserveAspectRatio="xMidYMid slice" clip-path="url(#clip)" x="5" y="2" width="100%" height="65%" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"></image> 
      <path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979 
     c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197 
     c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261 
     c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793 
     c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815 
     c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517 
     c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318 
     c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/> 

</svg>

3) SVG Muster - Ein SVG Kreis auf den SVG Pfad und füllt es mit einem Muster, das das Bild selbst ist.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40"> 
    <defs> 
     <pattern id="pf" x="0" y="0" height="100%" width="100%" 
      viewBox="0 0 960 420" preserveAspectRatio="xMinYMid slice"> 
     <image x="-150" y="11" width="960" height="420" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg" ></image> 
    </pattern> 
    </defs> 

    <circle cx="50%" cy="40%" r="13" fill="url(#pf)"></circle> 
     <path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979 
    c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197 
    c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261 
    c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793 
    c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815 
    c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517 
    c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318 
    c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/> 

</svg>

Ich denke, die einfachste Lösung, in diesem Fall mit CSS zu gehen, da es weniger positions Zwicken erfordert angemessene Ergebnisse zu erzielen.

demo

Quelle

2016-05-10 17:59:03 Uzi

Perfekt danke .. –

Antwort

Verwandte Themen