ダイナミックSVG負荷が

Question

<div class="svg1" style="height:50px; width:50px;"> 
</div> 
<div class="svg2" style="height:90px; width:90px;"> 
</div> 

私はsvgsはdiv要素にロードする

<svg> 
    <svg id="svg1"></svg> 
    <svg id="svg2"></svg> 
</svg> 

としてSVGを持っており、そのコンテナ（DIV）に等しい幅と高取る必要があります。 svg1はclass = svg1でdivに読み込まれ、svg2はclass = svg2でdivに読み込まれます。

これで私を助けてください。

Answer 1

あなたは正確に何をしようとしていますか？あなたは既にソースからのsvgファイルを持っていますか？たとえば、 "svg1.svg"という名前のsvgファイルがある場合、object - > embedタグを使用してhtmlマークアップに埋め込むことができます。

<div class='svg1'> 
     <object> 
     <embed src="svg1.svg"> 
     </object> 
</div> 

ここで、svg1.svgファイル内で、svg要素を100％幅と100％の高さに設定する必要があります。それが設定されると

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="100%" height="100%" viewBox="0 0 511.29 75.269" style="enable-background:new 0 0 511.29 75.269;" 
xml:space="preserve"> 


<path class="st0" d="M20.235,72.728c-2.449,0-4.896-0.523-7.344-1.567c-2.449-1.045-4.575-2.548-6.378-4.508l0.193,0.098L4,64.497 
    l9.277-9.898l2.706,2.548c0.708,0.589,1.368,1.063,1.981,1.422c0.612,0.359,1.368,0.539,2.271,0.539 
    c1.675,0,3.076-0.589,4.204-1.765c1.126-1.176,1.691-2.58,1.691-4.214V3.443h13.336v49.686c0,2.548-0.483,5.015-1.449,7.399 
    c-0.966,2.386-2.319,4.476-4.059,6.271c-1.739,1.798-3.785,3.234-6.136,4.313C25.469,72.19,22.941,72.728,20.235,72.728z"/> 
<path class="st0" d="M88.171,72.728c-4.317,0-8.538-0.815-12.66-2.449c-4.124-1.633-7.813-3.97-11.065-7.008 
    c-3.254-3.037-5.863-6.713-7.828-11.024c-1.966-4.313-2.947-9.114-2.947-14.406c0-4.572,0.87-8.982,2.609-13.23 
    c1.74-4.246,4.139-7.987,7.2-11.221c3.059-3.234,6.7-5.814,10.92-7.742c4.219-1.926,8.809-2.891,13.771-2.891 
    c4.445,0,8.746,0.867,12.901,2.597c4.156,1.732,7.828,4.149,11.017,7.252c3.189,3.104,5.75,6.811,7.683,11.123 
    s2.899,9.016,2.899,14.112c0,4.508-0.854,8.869-2.561,13.083c-1.708,4.214-4.092,7.938-7.151,11.172 
    c-3.061,3.234-6.701,5.816-10.92,7.742C97.818,71.766,93.196,72.728,88.171,72.728z M88.171,16.379 
    c-2.899,0-5.622,0.556-8.166,1.666c-2.546,1.112-4.784,2.646-6.716,4.606c-1.933,1.96-3.447,4.248-4.542,6.86 
    c-1.097,2.614-1.643,5.39-1.643,8.33c0,2.94,0.563,5.701,1.691,8.281c1.126,2.582,2.641,4.836,4.542,6.762 
    c1.9,1.928,4.123,3.447,6.668,4.558c2.544,1.111,5.267,1.666,8.166,1.666c2.899,0,5.62-0.555,8.166-1.666 
    c2.544-1.11,4.767-2.63,6.668-4.558c1.899-1.926,3.397-4.18,4.494-6.762c1.095-2.58,1.643-5.341,1.643-8.281 
    c0-2.94-0.564-5.716-1.691-8.33c-1.128-2.612-2.643-4.9-4.542-6.86c-1.901-1.96-4.124-3.494-6.668-4.606 
    C93.695,16.935,91.005,16.379,88.171,16.379z"/> 
<path class="st0" d="M192.541,3.443v68.6h-13.433v-27.44h-26.865v27.44h-13.336v-68.6h13.336v27.44h26.865V3.443H192.541z"/> 
<path class="st0" d="M213.221,2.757h5.895l36.529,41.16V3.443h13.336v69.286h-5.99l-36.433-41.062v40.376h-13.336V2.757z"/> 
<path class="st0" d="M369.193,72.043h-16.429l-18.361-26.166h-8.117v26.166H312.95v-68.6h27.349c2.834,0,5.508,0.556,8.021,1.666 
    c2.513,1.112,4.719,2.631,6.62,4.557c1.899,1.928,3.414,4.165,4.542,6.713c1.126,2.548,1.691,5.292,1.691,8.232 
    c0,4.312-1.097,8.183-3.286,11.613c-2.19,3.43-5.059,5.962-8.601,7.595L369.193,72.043z M337.786,32.353 
    c3.414,0,5.927-0.767,7.538-2.303c1.609-1.534,2.416-3.347,2.416-5.439c0-2.09-0.807-3.871-2.416-5.341 
    c-1.611-1.47-4.124-2.205-7.538-2.205h-11.5v15.288H337.786z"/> 
<path class="st0" d="M410.167,2.757l30.441,69.286h-14.786l-5.509-12.544h-25.802c-0.838,1.96-1.757,4.067-2.755,6.321 
    c-0.999,2.254-1.884,4.328-2.657,6.223H374.41l30.055-69.286H410.167z M414.322,45.877l-6.958-15.876l-6.958,15.876H414.322z"/> 
<path class="st0" d="M507.965,3.443l-25.319,35.476v33.124h-13.433V38.919c-1.933-2.744-3.979-5.618-6.137-8.624 
    c-2.159-3.004-4.317-6.042-6.475-9.114c-2.159-3.07-4.317-6.108-6.475-9.114c-2.16-3.004-4.204-5.88-6.137-8.624h16.524 
    l15.463,21.756l15.365-21.756H507.965z"/> 

    </svg> 

、あなたは、この例では「svg1」のクラスを持っているあなたの要素の親コンテナに戻って、あなたが好きな方の幅/高さのためにそれを設定することができます。あなたの場合、コンテナの高さは50px、幅は50pxです。埋め込みsvgは、100％の幅と高さに設定されているため、親（class = "svg1"）に自動的に拡大縮小されます。