相對規模Svg爲內固定股利（CSS和JS）

我有沒有相同大小的2個SVG圖形，但內容確實比較適合對方，請看下面的例子：相對規模Svg爲內固定股利（CSS和JS）

目標

我搜索而具有「固定幀」二者的圖像，其保留兩者svg's之間的比率的溶液。

的問題

下面的例子顯示了左邊的人如何「變大」，因爲SVG是不是從正確的人SVG小，並且能在fxied框架（max-width and max-height 100%）這樣

內種植更多

，因爲它們被加載在畫布上和工作在那裏我不能改變SVG文件（即視框）。

這兩個SVG僅僅是一個例子，還有很多其他的SVG具有不同的大小和比例。

的jsfiddle

我準備了小提琴演奏並嘗試可能的解決方案：https://jsfiddle.net/e6hs4w3s/

來源

2017-05-12 Paul Vincent Beigang

不是最好的解決方案，但你可以使用'transform：scale（value）';在圖片上：https://developer.mozilla.org/en/docs/Web/CSS/transform-function/scale –

你可以用下面的小提琴做一個具體的代碼示例https://jsfiddle.net/e6hs4w3s/ - 謝謝 –

我知道你在找嚴格使用CSS，但作爲一個（潛在的）後備您可以使用JavaScript來調整較小SVG的基礎上的比例較大的svg的計算高度/自然高度。

這是調整大小基於所述期望的比例越小IMG行：shortImg.height = shortImg.naturalHeight * (tallImg.height/tallImg.naturalHeight);

var images = document.querySelectorAll('.Tile'); 
 
var img1 = images[0]; 
 
var img2 = images[1]; 
 

 
if (img1.naturalHeight > img2.naturalHeight) { 
 
    tallImg = img1; 
 
    shortImg = img2; 
 
} else { 
 
    tallImg = img2; 
 
    shortImg = img1; 
 
} 
 

 
shortImg.height = shortImg.naturalHeight * (tallImg.height/tallImg.naturalHeight);

.Box { 
 
    display: inline-flex; 
 
    align-items: flex-end; 
 
    justify-content: center; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    background-color: grey; 
 
    vertical-align: bottom; 
 
} 
 

 
.Tile { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<img src="http://imgh.us/lay.svg" /> 
 
<img src="http://imgh.us/heart_23.svg" /> 
 

 
<hr /> 
 

 
<div class="Box"> 
 
    <img class="Tile" src="http://imgh.us/lay.svg" /> 
 
</div> 
 

 
<div class="Box"> 
 
    <img class="Tile" src="http://imgh.us/heart_23.svg" /> 
 
</div>

來源

2017-05-16 19:21:36 smrubin

我接受並授予JavaScript解決方案的獎金，因爲這是第一個足夠動態解決我的用例的問題，謝謝！ –

使用更合適viewBox對坐的人。使viewBox y和height組件與常規SVG中的組件相匹配。

在你的情況下，「站立」的SVG有一個viewBox y = 0和height = 367。「坐」SVG的高度= 269。

如果你讓坐着的人也有367的viewBox高度，兩者的比例將匹配。但是，您還需要更改其viewBox的y組件，否則它將位於SVG的頂部而不是底部。所以我們將y組件設置爲（269-367）來糾正它。

viewBox="0 -98 230.31494 367"

.Box { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    background-color: grey; 
 
} 
 

 
.Tile { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div class="Box"> 
 

 
<svg 
 
    class="Tile" 
 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
 
    xmlns:cc="http://creativecommons.org/ns#" 
 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 
    version="1.1" 
 
    id="Ebene_1" 
 
    x="0px" 
 
    y="0px" 
 
    width="6.499999cm" 
 
    height="7.5915117cm" 
 
    viewBox="0 -98 230.31494 367" 
 
    enable-background="new 0 0 283.46 283.46" 
 
    xml:space="preserve" 
 
    inkscape:version="0.92.0 r15299" 
 
    sodipodi:docname="zugewandt_nach_unten.svg"><metadata 
 
    id="metadata27"><rdf:RDF><cc:Work 
 
     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type 
 
     rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs 
 
    id="defs25" /><sodipodi:namedview 
 
    pagecolor="#ffffff" 
 
    bordercolor="#666666" 
 
    borderopacity="1" 
 
    objecttolerance="10" 
 
    gridtolerance="10" 
 
    guidetolerance="10" 
 
    inkscape:pageopacity="0" 
 
    inkscape:pageshadow="2" 
 
    inkscape:window-width="1280" 
 
    inkscape:window-height="657" 
 
    id="namedview23" 
 
    showgrid="false" 
 
    units="cm" 
 
    inkscape:zoom="1" 
 
    inkscape:cx="51.890866" 
 
    inkscape:cy="140.27666" 
 
    inkscape:window-x="-8" 
 
    inkscape:window-y="-8" 
 
    inkscape:window-maximized="1" 
 
    inkscape:current-layer="Ebene_1" 
 
    fit-margin-top="0" 
 
    fit-margin-left="0" 
 
    fit-margin-right="0" 
 
    fit-margin-bottom="0" 
 
    inkscape:pagecheckerboard="true" /> 
 
<g 
 
    id="g3" 
 
    transform="matrix(-1.1825709,0,0,1.1825709,230.31821,-66.220423)"> 
 
\t <path 
 
    d="m 154.409,92.382 c 2.378,4.021 6.902,5.898 12.702,6.499 -4.37,4.104 -14.615,1.891 -12.702,-6.499 z" 
 
    id="path5" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" /> 
 
\t <path 
 
    d="m 95.329,181.592 c -1.929,-2.74 -7.111,-5.074 -9.452,-8.567 1.326,-3.302 3.538,-5.093 5.612,-8.271 2.503,1.253 3.837,4.155 6.204,5.907 2.975,2.204 7.198,4.248 10.93,6.204 7.161,3.754 14.226,6.105 21.859,10.93 -1.638,3.984 -5.125,8.652 -7.976,12.406 -1.792,-0.078 -1.973,-1.018 -3.25,-2.362 1.052,4.188 3.411,6.844 6.203,9.452 3.106,2.9 13.093,7.684 13.884,12.702 0.667,4.229 -3.668,8.383 -6.499,9.747 -4.851,2.338 -11.467,2.618 -18.314,3.545 -17.772,2.408 -39.861,6.749 -54.353,10.634 -0.07,-3.613 0.012,-7.077 0.295,-10.338 7.509,-3.136 14.493,-7.042 22.154,-10.634 7.693,-3.607 16.185,-5.73 26.29,-6.5 3.629,-0.275 7.491,1.302 10.043,-0.295 -5.255,-1.816 -13.221,-2.709 -20.382,-1.772 -3.784,0.495 -9.981,4.586 -12.875,4.756 -4.165,0.245 -7.423,-6.422 -10.756,-8.891 -4.354,-3.225 -7.647,-6.24 -10.93,-9.749 -0.243,-7.731 0.063,-16.014 -3.249,-20.677 -0.934,4.94 0.733,11.296 0.295,19.2 -0.528,9.541 -3.121,20.377 -3.841,32.789 -0.318,5.496 -0.798,10.925 -0.295,17.428 0.388,4.998 2.265,13.149 1.182,16.247 -0.645,1.846 -6.201,5.688 -7.976,7.09 -4.705,3.72 -7.906,7.009 -13.588,7.68 -2.893,0.343 -6.303,-0.408 -6.794,-1.772 -0.258,-0.717 1.764,-2.797 3.25,-4.431 1.744,-1.918 2.818,-3.332 3.544,-4.431 1.965,-2.972 4.74,-6.738 6.203,-9.749 1.402,-2.883 0.811,-4.989 0.591,-8.861 -0.31,-5.44 0.422,-12.134 0,-17.428 -1.251,-15.694 -3.658,-33.514 -4.431,-51.103 -0.344,-7.83 -0.436,-15.952 0.591,-22.451 0.845,-5.349 4.916,-10.429 12.702,-7.975 2.738,0.862 8.226,5.452 10.93,7.384 10.395,7.428 19.205,17.48 32.199,22.156 z" 
 
    id="path7" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" /> 
 
\t <path 
 
    d="m 165.633,186.908 c 1.453,8.804 -3.142,22.188 1.479,27.472 2.745,3.142 9.129,6.53 13.904,8.053 3.712,1.183 9.56,1.866 12.472,4.543 -3.165,2.398 -10.156,0.245 -14.266,-0.483 -5.991,-1.064 -12.716,-2.966 -18.609,-0.887 -4.011,1.414 -5.568,5.899 -10.34,5.612 -2.66,-0.501 1.098,-2.64 1.772,-4.135 4.068,-9.019 3.812,-23.248 2.067,-34.857 5.049,-0.566 8.242,-2.986 11.521,-5.318 z" 
 
    id="path9" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" /> 
 
\t <path 
 
    d="m 40.091,237.219 c 0.182,4.248 -0.608,7.899 0,11.723 -9.146,1.374 -19.969,5.869 -29.54,6.499 -2.362,0.154 -5.277,0.199 -6.499,-1.772 0.896,-3.576 2.178,-3.695 4.333,-4.424 8.607,-2.91 15.533,-9.286 22.549,-12.709 2.045,-0.999 6.426,0.218 9.157,0.683 z" 
 
    id="path11" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" /> 
 
\t <path 
 
    d="m 169.117,105.585 c -3.789,-2.385 -8.862,-2.115 -13.587,-0.295 -1.44,0.555 -2.468,1.662 -3.841,1.772 -3.503,0.283 -5.502,-0.698 -8.567,-2.068 0.831,2.518 3.815,2.881 5.908,4.136 -0.84,2.311 -1.232,0.879 -1.863,4.271 1.753,-0.043 2.258,-1.242 3.92,-2.761 2.919,-2.67 11.884,-7.785 16.258,-2.101 0.66,0.857 1.29,2.776 1.479,4.135 0.885,6.416 0.351,14.986 0,22.746 -0.697,15.317 -0.622,31.636 -2.66,41.946 -3.868,0.563 -6.138,2.725 -10.93,2.363 -1.492,-14.936 1.168,-36.355 -6.498,-46.081 -0.777,4.567 2.566,9.542 2.067,14.474 -0.373,3.697 -3.416,7.464 -5.021,10.93 -2.746,5.929 -4.522,12.689 -7.975,16.838 -5.693,-2.095 -11.339,-5.942 -16.542,-9.748 -2.36,-1.727 -7.439,-6.067 -7.976,-9.159 -0.516,-2.975 1.074,-7.574 2.068,-11.224 1.699,-6.246 3.776,-11.365 3.249,-19.201 -2.357,1.513 -2.405,4.688 -2.954,7.09 -0.567,2.476 -1.357,5.154 -2.068,7.679 -1.388,4.935 -5.411,13.406 -2.659,18.316 2.058,3.672 9.207,8.246 12.997,10.633 5.443,3.428 9.08,7.222 14.18,9.453 4.87,2.132 10.908,-0.73 15.746,-1.123 1.674,0.292 0.589,1.919 -0.268,3.207 6.101,1.975 15.711,-6.053 15.537,-1.493 -2.353,9.6 -23.563,12.656 -34.561,6.203 -8.282,-4.858 -18.467,-9.137 -26.585,-13.884 -2.803,-1.639 -5.919,-3.115 -8.271,-5.021 -2.07,-1.676 -6.064,-6.029 -6.499,-8.271 -0.8,-4.127 1.95,-10.061 3.249,-15.064 2.158,-8.304 3.753,-13.701 6.794,-20.382 0.924,-2.03 2.024,-4.664 2.954,-5.612 4.713,-4.809 18.369,-4.518 26.29,-6.794 2.859,-0.822 5.622,-2.228 6.794,-5.318 2.344,-6.177 -1.19,-12.252 -1.772,-17.723 -0.861,-8.079 1.603,-15.854 5.316,-20.383 6.295,-7.677 20.574,-12.459 31.312,-6.499 4.378,2.43 9.727,7.719 10.854,12.19 2.453,9.716 -4.879,23.439 -10.123,28.416 -1.647,1.565 -3.207,3.117 -5.752,3.407 z m -7.384,-20.677 c 0.229,0.065 0.342,0.247 0.294,0.591 3.046,1.599 5.774,-1.618 3.842,-4.135" 
 
    id="path13" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" /> 
 
\t <path 
 
    d="m 162.186,55.997 c 0.199,0 0.196,0 0.396,0 6.142,0 11.791,1.277 15.852,4.135 4.196,2.953 8.647,8.275 9.748,13.588 1.209,5.828 -0.092,12.4 -2.067,17.428 -2.923,7.438 -9.257,13.562 -14.474,18.019 2.43,10.587 0.839,24.841 0.296,37.22 -0.468,10.617 -1.039,21.178 -2.659,30.426 1.421,0.761 2.186,0.926 2.363,3.249 0.125,1.649 -0.746,4.244 -2.954,5.907 -0.581,3.304 -0.086,8.046 -0.295,12.997 -0.196,4.656 -0.933,9.164 0.591,12.407 1.837,3.913 12.26,8.465 17.132,10.044 3.475,1.125 7.552,1.816 8.566,5.908 1.064,4.288 -8.802,2.549 -13.884,2.066 -5.919,-0.561 -11.474,-2.473 -15.95,-2.066 -3.359,0.304 -5.824,3.119 -8.862,5.021 -2.046,1.282 -8.383,3.896 -9.748,0 -0.917,-2.614 1.959,-5.31 2.954,-7.975 3.302,-8.851 3.733,-19.401 2.658,-31.607 -7.682,1.293 -13.458,-1.375 -18.905,-3.25 -2.427,4.663 -5.369,8.811 -8.271,12.997 4.168,6.246 16.768,9.067 17.725,18.02 1.525,14.28 -15.868,14.926 -27.472,16.542 -18.028,2.513 -39.852,6.658 -54.648,10.043 -0.06,3.664 0.596,6.441 0.886,9.158 0.283,2.663 1.301,6.291 0.591,9.452 -0.671,2.981 -5.512,5.316 -8.862,7.976 -5.566,4.418 -9.548,9.458 -17.428,9.748 -4.32,0.159 -10.468,-1.677 -10.634,-4.727 -0.109,-1.997 2.922,-4.173 4.431,-5.611 5.661,-5.403 11.798,-15.013 10.93,-20.088 -2.639,-0.34 -6,1.328 -9.453,2.068 -3.363,0.721 -7.076,1.395 -10.635,2.068 -5.167,0.977 -19.593,3.505 -20.086,-3.25 -0.5,-6.841 11.431,-7.824 16.542,-10.93 6.697,-4.069 12.635,-14.058 23.534,-8.613 -2.043,-15.677 -4.313,-36.206 -5.428,-54.158 -0.33,-5.322 -0.356,-10.632 0.209,-15.508 1.092,-9.412 6.831,-18.869 18.314,-15.656 2.347,0.657 5.177,3.024 7.681,4.726 7.516,5.112 14.579,11.641 21.563,16.247 3.45,-3.143 5.502,-4.255 7.208,-8.248 -1.796,-4.543 -0.257,-7.046 0.159,-8.922 1.07,-4.835 2.708,-6.9 4.154,-11.779 1.529,-5.16 2.977,-9.229 4.431,-14.178 1.398,-4.757 3.601,-8.829 7.09,-11.521 3.581,-2.763 8.66,-3.413 14.179,-4.431 3.427,-0.632 10.732,-0.849 13.588,-2.363 6.498,-3.447 1.389,-14.053 0.886,-20.677 -0.491,-6.473 0.888,-12.902 3.25,-17.429 4.873,-9.345 13.085,-13.365 24.808,-14.473 z m 12.683,46.181 c 5.244,-4.976 12.22,-18.445 9.769,-28.162 -1.13,-4.471 -5.963,-9.977 -10.341,-12.407 -10.737,-5.961 -25.016,-1.179 -31.311,6.499 -3.713,4.529 -6.177,12.304 -5.317,20.383 0.583,5.471 4.116,11.546 1.772,17.723 -1.172,3.09 -3.935,4.496 -6.794,5.317 -7.92,2.277 -21.577,1.985 -26.29,6.794 -0.93,0.948 -2.03,3.583 -2.954,5.612 -3.042,6.681 -4.637,12.077 -6.794,20.382 -1.299,5.003 -4.049,10.938 -3.249,15.065 0.435,2.242 4.429,6.594 6.499,8.271 2.352,1.905 5.468,3.382 8.271,5.021 8.118,4.748 18.191,9.22 26.585,13.884 10.919,6.067 31.195,3.359 34.562,-6.202 -0.572,-3.586 -10.684,4.357 -16.784,2.382 -0.675,-1.012 2.209,-3.449 0.535,-3.741 -4.839,0.394 -9.897,2.899 -14.767,0.769 -5.1,-2.233 -8.736,-6.025 -14.18,-9.454 -3.791,-2.386 -10.939,-6.961 -12.997,-10.634 -2.752,-4.91 1.271,-13.38 2.659,-18.314 0.71,-2.526 1.501,-5.203 2.068,-7.68 0.549,-2.401 0.597,-5.576 2.954,-7.089 0.527,7.834 -1.55,12.955 -3.249,19.201 -0.994,3.65 -2.584,8.248 -2.068,11.225 0.536,3.091 5.615,7.431 7.976,9.157 5.203,3.807 11.206,7.031 16.542,9.748 3.453,-4.147 5.229,-10.907 7.975,-16.838 1.605,-3.466 4.117,-7.768 5.022,-10.929 -0.897,-4.338 -2.846,-9.908 -2.068,-14.475 7.666,9.726 5.006,31.145 6.499,46.082 4.791,0.36 7.061,-1.801 10.93,-2.363 2.037,-10.31 1.962,-26.63 2.659,-41.947 0.351,-7.759 0.886,-16.33 0,-22.745 -0.188,-1.359 -0.818,-3.278 -1.478,-4.135 -4.374,-5.684 -12.805,-0.391 -15.724,2.278 -1.662,1.52 -4.009,3.831 -5.545,4.811 -0.104,-3.254 1.893,-4.276 2.954,-6.499 -2.093,-1.254 -5.077,-1.618 -5.908,-4.136 3.275,0.366 5.063,2.351 8.566,2.068 1.374,-0.11 2.4,-1.218 3.842,-1.772 4.724,-1.819 9.797,-2.09 13.587,0.295 2.297,-0.416 3.945,-1.88 5.592,-3.445 z M 62.935,159.385 c -2.704,-1.933 -8.192,-6.522 -10.93,-7.385 -7.786,-2.454 -11.857,2.627 -12.702,7.976 -1.027,6.499 -0.935,14.62 -0.591,22.45 0.773,17.589 3.179,35.409 4.431,51.103 0.422,5.295 -0.31,11.988 0,17.429 0.22,3.872 0.812,5.979 -0.591,8.861 -1.463,3.011 -4.238,6.776 -6.203,9.749 -0.727,1.098 -1.8,2.513 -3.544,4.43 -1.485,1.634 -3.507,3.714 -3.25,4.432 0.491,1.364 3.901,2.114 6.794,1.772 5.682,-0.672 8.883,-3.961 13.588,-7.68 1.775,-1.403 7.331,-5.245 7.976,-7.09 1.083,-3.099 -0.794,-11.249 -1.182,-16.247 -0.503,-6.503 -0.023,-11.933 0.295,-17.429 0.72,-12.411 3.313,-23.248 3.841,-32.789 0.438,-7.904 -1.229,-14.259 -0.295,-19.199 3.312,4.662 3.005,12.944 3.249,20.677 3.283,3.508 6.576,6.524 10.93,9.748 3.333,2.469 7.104,7.11 11.469,7.912 2.883,-0.617 8.379,-3.282 12.163,-3.777 7.162,-0.936 15.127,-0.043 20.382,1.772 -2.553,1.598 -6.414,0.021 -10.043,0.296 -10.105,0.77 -18.597,2.893 -26.29,6.499 -7.661,3.592 -14.645,7.498 -22.154,10.634 -0.284,3.262 -0.366,6.725 -0.295,10.339 14.491,-3.886 36.58,-8.226 54.353,-10.634 6.847,-0.927 13.463,-1.207 18.314,-3.545 2.831,-1.364 7.166,-5.52 6.499,-9.748 -0.791,-5.018 -10.777,-9.801 -13.883,-12.702 -2.792,-2.608 -5.151,-5.264 -6.203,-9.452 1.474,0.596 1.829,1.089 3.25,2.362 2.851,-3.754 6.337,-8.422 7.976,-12.406 -8.059,-3.791 -14.698,-7.176 -21.859,-10.929 -3.732,-1.957 -7.955,-4.001 -10.93,-6.204 -2.366,-1.753 -4.279,-3.636 -6.203,-5.907 -1.688,3.518 -4.286,4.969 -5.612,8.271 2.341,3.493 7.523,5.827 9.452,8.567 -12.999,-4.677 -21.809,-14.729 -32.202,-22.156 z m 77.983,18.314 c 3.315,0.798 7.125,-0.198 10.614,-0.698 -0.266,-7.613 0.624,-15.659 -0.57,-22.343 -3.257,7.772 -5.556,16.5 -10.044,23.041 z m 12.998,14.475 c 1.744,11.608 1.998,25.839 -2.068,34.856 -0.675,1.496 -3.701,3.508 -1.772,4.135 4.772,0.287 6.328,-4.197 10.338,-5.611 5.896,-2.08 12.621,-0.178 18.61,0.886 4.111,0.729 12.236,3.119 12.407,0 0.196,-2.137 -6.703,-2.824 -10.415,-4.007 -4.775,-1.522 -11.355,-4.963 -14.103,-8.105 -4.618,-5.282 -1.13,-18.618 -1.477,-27.471 -3.282,2.331 -6.473,4.75 -11.52,5.317 z m -93.345,37.809 c 7.416,-2.923 15.059,-5.618 20.973,-10.043 -7.239,-4.085 -12.655,-9.992 -18.019,-15.951 -1.016,8.634 -2.797,16.502 -2.954,25.994 z m -29.835,6.499 c -7.016,3.423 -13.585,10.512 -22.192,13.422 -2.154,0.729 -3.793,0.135 -4.689,3.711 1.222,1.973 4.137,1.928 6.499,1.773 9.57,-0.63 20.393,-5.126 29.54,-6.5 0.225,-3.832 0.379,-7.422 0.197,-11.67 -2.731,-0.464 -7.309,-1.734 -9.355,-0.736 z" 
 
    id="path15" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill-rule:evenodd" /> 
 
\t <path 
 
    d="m 166.224,81.453 c 1.936,2.518 -0.793,5.734 -3.839,4.135 0.048,-0.344 -0.065,-0.526 -0.297,-0.591 0.29,-2.27 1.403,-3.718 4.136,-3.544 z" 
 
    id="path17" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill-rule:evenodd" /> 
 
\t <path 
 
    d="m 158.249,85.588 c -0.214,1.265 -0.908,2.045 -1.773,2.659 0.62,7.552 8.587,7.759 16.247,8.271 -3.025,6.303 -16.426,9.722 -19.792,1.772 -1.105,-2.613 -0.167,-5.767 0.297,-9.157 -1.041,-1.271 -5.233,-0.809 -4.728,-2.659 2.581,0.588 7.026,0.102 9.749,-0.886 z m 9.672,12.849 c -5.8,-0.6 -11.134,-2.033 -13.512,-6.054 -1.913,8.389 7.679,11.042 13.512,6.054 z" 
 
    id="path19" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill-rule:evenodd" /> 
 
\t <path 
 
    d="m 175.381,86.77 c 1.271,2.657 -2.075,5.457 -4.431,3.544 0.048,-0.344 -0.064,-0.526 -0.294,-0.59 0.035,-2.445 2.478,-4.557 4.725,-2.954 z" 
 
    id="path21" 
 
    inkscape:connector-curvature="0" 
 
    style="clip-rule:evenodd;fill-rule:evenodd" /> 
 
</g> 
 
</svg> 
 
</div> 
 

 
<div class="Box"> 
 
    <img class="Tile" src="http://imgh.us/heart_23.svg" /> 
 
</div>

來源

2017-05-12 14:27:28

我無法更改svg文件的視圖框，因爲svgs加載在畫布上，而且視圖框越大，對象的「輪廓」就會隨着展開的視圖框增長。 –

如何使用一個簡單的基於百分比邊距和大小是按比例的兩個SVG圖像相應內固定的容器？

這就是我想出了：

<div class="box"> 
    <img class="tile left" src="https://imgh.us/lay.svg" /> 
</div> 

<div class="box"> 
    <img class="tile right" src="https://imgh.us/heart_23.svg" /> 
</div>

而CSS：

.left { 
    margin-top: 20%; 
    margin-left: 25%; 
    height: 80%; 
    width: 75%; 
} 

.right { 
    height: 100%; 
    margin-right: 25%; 
    width: 75%; 
} 

.box { 
    float: left; 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    background-color: grey; 
}

當然，你可以改變的百分比，以自己的喜好。乾杯!

來源

2017-05-17 03:06:28

這兩個SVG只是一個例子，還有很多其他的SVG具有不同的大小和比例。您的解決方案假定我知道SVG之間的比率，事實並非如此。我在我的問題中添加了該信息。 –

在這種情況下，我想認可選定的答案，但我會在這裏留下我的答案，只是爲了完成。此外 - 沒有理由downvote，每個人！當原始問題尚未更新時，給出了這個答案。 –

相對規模Svg爲內固定股利（CSS和JS）

回答

相關問題