html - SVG 布局属性

Question

我试图将单独的 SVG 代码放置在底部内联，但不确定这与通常的 HTML 布局属性有何不同。

我将每个 SVG 包装在一个公共(public) div 中，如下所示:

    .svg-container {
     width: 60px;
     display: inline-block;
    }

   <div class="svg-container">
    <svg viewBox="0 0 128 128">
    <path fill="#E44D26" d="M27.854 116.354l-8.043-90.211h88.378l-8.051 
    90.197-36.192 10.033z"></path><path fill="#F16529" d="M64 
    118.704l29.244-8.108 6.881-77.076h-36.125z"></path><path fill="#EBEBEB" 
    d="M64 66.978h-14.641l-1.01-11.331h15.651v-11.064h-27.743l.264 2.969 
    2.72 30.489h24.759zM64 95.711l-.049.013-12.321-3.328-.788-8.823h-
    11.107l1.55 17.372 22.664 6.292.051-.015z"></path><path d="M28.034 
    1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-
    5.143v5.633h-
    5.623v-16.822zM51.816 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-
    5.623v-11.243zM64.855 1.627h5.862l3.607 5.911 3.603-
    5.911h5.865v16.822h-
    5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-
    16.822zM86.591 
    1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path><path 
    fill="#fff" d="M63.962 66.978v11.063h13.624l-1.284 14.349-12.34 
    3.331v11.51l22.682-6.286.166-1.87 2.6-29.127.27-2.97h-2.982zM63.962 
    44.583v11.064h26.725l.221-2.487.505-5.608.265-2.969z"></path>
    </svg>
    </div>
    <div class="svg-container">
    <svg viewBox="0 0 128 128">
    <path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
    <path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-
    15.672-
    14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-
    3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 
    4.724 
    5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-
    4.045-
    3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-
    8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 
    6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-
    6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 
    2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 
    1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 
    12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-
    3.106-
    2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 
    3.249 
    3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-
    1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-
    10.735.001-21.468.001-32.237z"></path>
    </svg>
    </div>

如果我调整 View 框中的坐标以与 viewBox = <min-x> <min-y> <width> <height> 相关联如<svg viewBox="0 -250 128 128">位置没有改变。

任何具有 svg 经验的人的帮助将不胜感激!

Answer 1

1. 显然，您尝试删除 Html5 Logo 上方的文本“HTML” 在 SVG 文件中删除路径的多余部分。我拿了 原始 HTML5 Logo svg 文件并添加了 css 标记。
2. “JS” Logo 不在视口(viewport)的中心。为了 添加了 viewport 中心 JS 字符的位置:

宽度=“100”高度=“100”viewBox=“12 25 128 128”

viewBox 的前两个属性将 JS 字符分别向左移动 12px 和 25px。

如果我正确理解你的问题，它应该是这样的:

.svg-container {
position:absolute;
 top:2%; 
 left:1%;
 width: 120px;
 display: inline-block;
 }
.svg-container2 {
 position:absolute;
 top:16%; 
 left:20%;
 width: 60px;
 display: inline-block;

}
.wrap {
width:1000px;
height:120px;
position:relative;
padding:0.5em;
} 

<div class="wrap">
<div class="svg-container">
<svg  viewBox="0 0 512 512">
	<title>HTML5 Logo</title>
	<polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"/>
	<polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894"/>
	<polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
	<polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
	<path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
	<path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
	<path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
	<path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
	<polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
	<polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
</svg>
</div>
<div class="svg-container2">
<svg    width="100" height="100" viewBox="12 25 128 128" style="border:1px solid black">
<rect x="12" y="25" width="128" height="128" fill="#F0DB4F"    />
<path fill="#F0DB4F"  d="M1.408 1.408h125.184v125.185h-125.184z"></path>
<path fill="#323330" stroke="none" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 
5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 
2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 
1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 
12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z">
</path>
</svg>
</div>
</div>