<div class="svg1" style="height:50px; width:50px;">
</div>
<div class="svg2" style="height:90px; width:90px;">
</div>
我有svg为
<svg>
<svg id="svg1"></svg>
<svg id="svg2"></svg>
</svg>
我希望svgs加载div，并且宽度和高度应该等于它们的容器（div）。 svg1应该在div中加载class = svg1，而svg2应该在div中加载class = svg2
请帮帮我。
答案 0 :(得分：0)
你到底想干什么？你有一个svg文件来源吗？例如，如果您有一个名为＆＃34; svg1.svg＆＃34;的svg文件，那么您可以使用object - ＆gt; 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>
设置完成后，您可以返回元素的父容器，该容器的类别为＆＃39; svg1＆＃39;在此示例中，将其设置为您喜欢的宽度/高度。在您的情况下，容器的高度为：50px，宽度为50px。嵌入的svg将自动缩放到父级（class =＆＃34; svg1＆＃34;），因为它设置为100％宽度和高度。