在没有填充的情况下在DIV中嵌入SVG

时间:2017-02-22 19:07:07

标签: svg

我们需要在特定的div中包含特定的SVG,而不需要任何填充和边距。

请检查此代码。



div {
    resize: both;
    outline: 1px solid red;
    margin-bottom: 3em;
    padding: 1em;
}

svg,
img {
  display: block;
  outline: 1px solid blue;
  max-width: 100%;
  height: auto;
}

<div>
  Embedded SVG:
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="#000000" stroke="#000000" d="M25.305555555555557,42.41666666666667C25.305555555555557,42.41666666666667,25.305555555555557,-9.888888888888886,25.305555555555557,-9.888888888888886C25.305555555555557,-9.888888888888886,16.166666666666668,-9.888888888888886,16.166666666666668,-9.888888888888886C16.166666666666668,-9.888888888888886,16.166666666666668,-19.02777777777777,16.166666666666668,-19.02777777777777C16.166666666666668,-19.02777777777777,46.5,-19.02777777777777,46.5,-19.02777777777777C46.5,-19.02777777777777,46.5,-9.888888888888886,46.5,-9.888888888888886C46.5,-9.888888888888886,37.75,-9.888888888888886,37.75,-9.888888888888886C37.75,-9.888888888888886,37.75,42.41666666666667,37.75,42.41666666666667C37.75,42.41666666666667,25.305555555555557,42.41666666666667,25.305555555555557,42.41666666666667C25.305555555555557,42.41666666666667,25.305555555555557,42.41666666666667,25.305555555555557,42.41666666666667" transform="matrix(0.45,0,0,1,-0.003,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M61.47222222222222,42.41666666666667C61.47222222222222,42.41666666666667,61.47222222222222,-19.02777777777777,61.47222222222222,-19.02777777777777C61.47222222222222,-19.02777777777777,87.13888888888889,-19.02777777777777,87.13888888888889,-19.02777777777777C87.13888888888889,-19.02777777777777,87.13888888888889,-10.472222222222221,87.13888888888889,-10.472222222222221C87.13888888888889,-10.472222222222221,73.91666666666667,-10.472222222222221,73.91666666666667,-10.472222222222221C73.91666666666667,-10.472222222222221,73.91666666666667,6.250000000000007,73.91666666666667,6.250000000000007C73.91666666666667,6.250000000000007,83.25,6.250000000000007,83.25,6.250000000000007C83.25,6.250000000000007,83.25,15.000000000000004,83.25,15.000000000000004C83.25,15.000000000000004,73.91666666666667,15.000000000000004,73.91666666666667,15.000000000000004C73.91666666666667,15.000000000000004,73.91666666666667,33.861111111111114,73.91666666666667,33.861111111111114C73.91666666666667,33.861111111111114,87.13888888888889,33.861111111111114,87.13888888888889,33.861111111111114C87.13888888888889,33.861111111111114,87.13888888888889,42.41666666666667,87.13888888888889,42.41666666666667C87.13888888888889,42.41666666666667,61.47222222222222,42.41666666666667,61.47222222222222,42.41666666666667C61.47222222222222,42.41666666666667,61.47222222222222,42.41666666666667,61.47222222222222,42.41666666666667" transform="matrix(0.45,0,0,1,-0.0013,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M118.58333333333333,43.583333333333336C97.97222222222221,43.97222222222223,100.5,21.80555555555556,100.69444444444444,1.5833333333333357C100.69444444444444,-12.999999999999993,106.72222222222221,-20.388888888888886,118.58333333333333,-20.388888888888886C132.58333333333331,-20.388888888888886,136.66666666666666,-9.888888888888886,135.69444444444443,5.4722222222222285C135.69444444444443,5.4722222222222285,123.44444444444444,5.4722222222222285,123.44444444444444,5.4722222222222285C123.05555555555554,-1.1388888888888857,125,-10.666666666666664,118.58333333333333,-10.666666666666664C114.88888888888889,-10.666666666666664,113.13888888888889,-7.55555555555555,113.13888888888889,-1.5277777777777715C113.13888888888889,-1.5277777777777715,113.13888888888889,24.91666666666667,113.13888888888889,24.91666666666667C113.13888888888889,30.94444444444445,114.88888888888889,34.05555555555556,118.58333333333333,34.05555555555556C125,34.05555555555556,123.44444444444444,24.138888888888893,123.63888888888889,17.138888888888893C123.63888888888889,17.138888888888893,135.69444444444443,17.138888888888893,135.69444444444443,17.138888888888893C136.27777777777777,32.111111111111114,132.77777777777777,43.19444444444445,118.58333333333333,43.583333333333336C118.58333333333333,43.583333333333336,118.58333333333333,43.583333333333336,118.58333333333333,43.583333333333336" transform="matrix(0.45,0,0,1,-0.0072,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M151.47222222222223,42.41666666666667C151.47222222222223,42.41666666666667,151.47222222222223,-19.02777777777777,151.47222222222223,-19.02777777777777C151.47222222222223,-19.02777777777777,163.91666666666666,-19.02777777777777,163.91666666666666,-19.02777777777777C163.91666666666666,-19.02777777777777,163.91666666666666,6.055555555555557,163.91666666666666,6.055555555555557C163.91666666666666,6.055555555555557,172.86111111111111,6.055555555555557,172.86111111111111,6.055555555555557C172.86111111111111,6.055555555555557,172.86111111111111,-19.02777777777777,172.86111111111111,-19.02777777777777C172.86111111111111,-19.02777777777777,185.30555555555554,-19.02777777777777,185.30555555555554,-19.02777777777777C185.30555555555554,-19.02777777777777,185.30555555555554,42.41666666666667,185.30555555555554,42.41666666666667C185.30555555555554,42.41666666666667,172.86111111111111,42.41666666666667,172.86111111111111,42.41666666666667C172.86111111111111,42.41666666666667,172.86111111111111,15.000000000000004,172.86111111111111,15.000000000000004C172.86111111111111,15.000000000000004,163.91666666666666,15.000000000000004,163.91666666666666,15.000000000000004C163.91666666666666,15.000000000000004,163.91666666666666,42.41666666666667,163.91666666666666,42.41666666666667C163.91666666666666,42.41666666666667,151.47222222222223,42.41666666666667,151.47222222222223,42.41666666666667C151.47222222222223,42.41666666666667,151.47222222222223,42.41666666666667,151.47222222222223,42.41666666666667" transform="matrix(0.45,0,0,1,-0.0012,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M201.47222222222226,42.41666666666667C201.47222222222226,42.41666666666667,201.47222222222226,-19.22222222222222,201.47222222222226,-19.22222222222222C201.47222222222226,-19.22222222222222,210.41666666666669,-19.22222222222222,210.41666666666669,-19.22222222222222C210.41666666666669,-19.22222222222222,223.83333333333337,13.05555555555556,223.83333333333337,13.05555555555556C223.83333333333337,13.05555555555556,223.83333333333337,-19.22222222222222,223.83333333333337,-19.22222222222222C223.83333333333337,-19.22222222222222,234.1388888888889,-19.22222222222222,234.1388888888889,-19.22222222222222C234.1388888888889,-19.22222222222222,234.1388888888889,42.41666666666667,234.1388888888889,42.41666666666667C234.1388888888889,42.41666666666667,225.58333333333337,42.41666666666667,225.58333333333337,42.41666666666667C225.58333333333337,42.41666666666667,212.16666666666669,8.19444444444445,212.16666666666669,8.19444444444445C212.16666666666669,8.19444444444445,212.16666666666669,42.41666666666667,212.16666666666669,42.41666666666667C212.16666666666669,42.41666666666667,201.47222222222226,42.41666666666667,201.47222222222226,42.41666666666667C201.47222222222226,42.41666666666667,201.47222222222226,42.41666666666667,201.47222222222226,42.41666666666667" transform="matrix(0.45,0,0,1,-0.0097,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M268.5833333333333,43.583333333333336C247.97222222222223,43.583333333333336,250.5,21.611111111111114,250.69444444444443,1.5833333333333357C250.69444444444443,-12.999999999999993,256.52777777777777,-20.388888888888886,268.5833333333333,-20.388888888888886C280.6388888888889,-20.388888888888886,286.6666666666667,-12.999999999999993,286.6666666666667,1.5833333333333357C286.8611111111111,21.80555555555556,289.19444444444446,43.583333333333336,268.5833333333333,43.583333333333336C268.5833333333333,43.583333333333336,268.5833333333333,43.583333333333336,268.5833333333333,43.583333333333336M268.5833333333333,-10.666666666666664C263.9166666666667,-10.472222222222221,263.13888888888886,-6.194444444444443,263.13888888888886,-1.5277777777777715C263.13888888888886,-1.5277777777777715,263.13888888888886,24.91666666666667,263.13888888888886,24.91666666666667C263.13888888888886,30.94444444444445,264.88888888888886,34.05555555555556,268.5833333333333,34.05555555555556C272.27777777777777,34.05555555555556,274.22222222222223,30.94444444444445,274.22222222222223,24.91666666666667C274.22222222222223,24.91666666666667,274.22222222222223,-1.5277777777777715,274.22222222222223,-1.5277777777777715C274.22222222222223,-7.55555555555555,272.27777777777777,-10.666666666666664,268.5833333333333,-10.666666666666664C268.5833333333333,-10.666666666666664,268.5833333333333,-10.666666666666664,268.5833333333333,-10.666666666666664" transform="matrix(0.45,0,0,1,0.009,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M301.47222222222223,42.41666666666667C301.47222222222223,42.41666666666667,301.47222222222223,-19.02777777777777,301.47222222222223,-19.02777777777777C301.47222222222223,-19.02777777777777,313.9166666666667,-19.02777777777777,313.9166666666667,-19.02777777777777C313.9166666666667,-19.02777777777777,313.9166666666667,33.861111111111114,313.9166666666667,33.861111111111114C313.9166666666667,33.861111111111114,326.1666666666667,33.861111111111114,326.1666666666667,33.861111111111114C326.1666666666667,33.861111111111114,326.1666666666667,42.41666666666667,326.1666666666667,42.41666666666667C326.1666666666667,42.41666666666667,301.47222222222223,42.41666666666667,301.47222222222223,42.41666666666667C301.47222222222223,42.41666666666667,301.47222222222223,42.41666666666667,301.47222222222223,42.41666666666667" transform="matrix(0.45,0,0,1,0.0017,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M358.5833333333333,43.583333333333336C337.97222222222223,43.583333333333336,340.5,21.611111111111114,340.69444444444446,1.5833333333333357C340.69444444444446,-12.999999999999993,346.52777777777777,-20.388888888888886,358.5833333333333,-20.388888888888886C370.6388888888889,-20.388888888888886,376.6666666666667,-12.999999999999993,376.6666666666667,1.5833333333333357C376.8611111111111,21.80555555555556,379.19444444444446,43.583333333333336,358.5833333333333,43.583333333333336C358.5833333333333,43.583333333333336,358.5833333333333,43.583333333333336,358.5833333333333,43.583333333333336M358.5833333333333,-10.666666666666664C353.9166666666667,-10.472222222222221,353.13888888888886,-6.194444444444443,353.13888888888886,-1.5277777777777715C353.13888888888886,-1.5277777777777715,353.13888888888886,24.91666666666667,353.13888888888886,24.91666666666667C353.13888888888886,30.94444444444445,354.88888888888886,34.05555555555556,358.5833333333333,34.05555555555556C362.27777777777777,34.05555555555556,364.22222222222223,30.94444444444445,364.22222222222223,24.91666666666667C364.22222222222223,24.91666666666667,364.22222222222223,-1.5277777777777715,364.22222222222223,-1.5277777777777715C364.22222222222223,-7.55555555555555,362.27777777777777,-10.666666666666664,358.5833333333333,-10.666666666666664C358.5833333333333,-10.666666666666664,358.5833333333333,-10.666666666666664,358.5833333333333,-10.666666666666664" transform="matrix(0.45,0,0,1,-0.0033,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M406.25,43.583333333333336C387.5833333333333,43.19444444444445,390.88888888888886,20.44444444444445,390.69444444444446,1.5833333333333357C390.69444444444446,-12.999999999999993,396.72222222222223,-20.388888888888886,408.77777777777777,-20.388888888888886C422.3888888888889,-20.388888888888886,427.25,-10.861111111111107,426.47222222222223,3.9166666666666714C426.47222222222223,3.9166666666666714,414.4166666666667,3.9166666666666714,414.4166666666667,3.9166666666666714C414.4166666666667,-2.694444444444443,415.38888888888886,-10.472222222222221,408.77777777777777,-10.666666666666664C404.88888888888886,-10.666666666666664,403.13888888888886,-7.55555555555555,403.13888888888886,-1.5277777777777715C403.13888888888886,-1.5277777777777715,403.13888888888886,24.91666666666667,403.13888888888886,24.91666666666667C403.13888888888886,30.94444444444445,404.88888888888886,34.05555555555556,408.77777777777777,34.05555555555556C414.02777777777777,34.05555555555556,414.80555555555554,26.47222222222223,414.4166666666667,19.66666666666667C414.4166666666667,19.66666666666667,407.4166666666667,19.66666666666667,407.4166666666667,19.66666666666667C407.4166666666667,19.66666666666667,407.4166666666667,10.722222222222225,407.4166666666667,10.722222222222225C407.4166666666667,10.722222222222225,426.8611111111111,10.722222222222225,426.8611111111111,10.722222222222225C426.8611111111111,10.722222222222225,426.8611111111111,42.41666666666667,426.8611111111111,42.41666666666667C426.8611111111111,42.41666666666667,418.30555555555554,42.41666666666667,418.30555555555554,42.41666666666667C418.30555555555554,42.41666666666667,416.75,38.13888888888889,416.75,38.13888888888889C415,41.05555555555556,410.72222222222223,43.583333333333336,406.25,43.583333333333336C406.25,43.583333333333336,406.25,43.583333333333336,406.25,43.583333333333336" transform="matrix(0.45,0,0,1,0.0049,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="#000000" stroke="#000000" d="M455.27777777777777,8.000000000000007C455.27777777777777,8.000000000000007,461.5,-19.02777777777777,461.5,-19.02777777777777C461.5,-19.02777777777777,472.97222222222223,-19.02777777777777,472.97222222222223,-19.02777777777777C472.97222222222223,-19.02777777777777,461.30555555555554,22.000000000000004,461.30555555555554,22.000000000000004C461.30555555555554,22.000000000000004,461.30555555555554,42.41666666666667,461.30555555555554,42.41666666666667C461.30555555555554,42.41666666666667,449.25,42.41666666666667,449.25,42.41666666666667C449.25,42.41666666666667,449.25,22.000000000000004,449.25,22.000000000000004C449.25,22.000000000000004,437.77777777777777,-19.02777777777777,437.77777777777777,-19.02777777777777C437.77777777777777,-19.02777777777777,449.44444444444446,-19.02777777777777,449.44444444444446,-19.02777777777777C449.44444444444446,-19.02777777777777,455.27777777777777,8.000000000000007,455.27777777777777,8.000000000000007" transform="matrix(0.45,0,0,1,-0.0043,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path><path fill="none" stroke="none" d="M0,100L1000,100" stroke-width="5" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
  </svg>
</div>
   
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

你在div上设置了填充和边距吗?尝试:

div {
    resize: both;
    outline: 1px solid red;
    display: inline-block;
}

svg,
img {
    display: block;
    outline: 1px solid blue;
    max-width: 100%;
    height: auto;
}

答案 1 :(得分:0)

通过设置viewBox =&#34; 6 45 209 205&#34;。

,它对我有用

有没有办法动态占用任何SVG的DIV?

答案 2 :(得分:0)

如果您正在讨论SVG中的额外空间,那么您需要修复SVG viewBox。阅读viewBox的工作原理。它的值需要与SVG中路径的边界维度相对应。目前你似乎有一个任意的viewBox&#34; 0 0 100 100&#34;。

如果您实际测量它,SVG中所有路径的边界是:

x:      0
y:      44.61
width:  1000
height: 64.36

所以你的viewBox必须是

viewBox="0 44.61 1000 64.36"

如果你插入它,你会得到整个文本。但是它很小,并且在您为SVG widthheight指定的300 x 300像素框中居中。

要解决此问题,只需删除height属性即可。 SVG将缩放以适应300px宽度,SVG的高度将由浏览器自动计算(使用viewBox隐含的宽高比)。

&#13;
&#13;
div {
    resize: both;
    outline: 1px solid red;
    margin-bottom: 3em;
    padding: 1em;
}

svg,
img {
  display: block;
  outline: 1px solid blue;
  max-width: 100%;
  height: auto;
}
&#13;
<div>
  Embedded SVG:
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" viewBox="0 44.61 1000 64.36" preserveAspectRatio="xMidYMid meet">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
    <path fill="#000000" stroke="#000000" d="M25.305555555555557,42.41666666666667C25.305555555555557,42.41666666666667,25.305555555555557,-9.888888888888886,25.305555555555557,-9.888888888888886C25.305555555555557,-9.888888888888886,16.166666666666668,-9.888888888888886,16.166666666666668,-9.888888888888886C16.166666666666668,-9.888888888888886,16.166666666666668,-19.02777777777777,16.166666666666668,-19.02777777777777C16.166666666666668,-19.02777777777777,46.5,-19.02777777777777,46.5,-19.02777777777777C46.5,-19.02777777777777,46.5,-9.888888888888886,46.5,-9.888888888888886C46.5,-9.888888888888886,37.75,-9.888888888888886,37.75,-9.888888888888886C37.75,-9.888888888888886,37.75,42.41666666666667,37.75,42.41666666666667C37.75,42.41666666666667,25.305555555555557,42.41666666666667,25.305555555555557,42.41666666666667C25.305555555555557,42.41666666666667,25.305555555555557,42.41666666666667,25.305555555555557,42.41666666666667" transform="matrix(0.45,0,0,1,-0.003,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;">
    </path><path fill="#000000" stroke="#000000" d="M61.47222222222222,42.41666666666667C61.47222222222222,42.41666666666667,61.47222222222222,-19.02777777777777,61.47222222222222,-19.02777777777777C61.47222222222222,-19.02777777777777,87.13888888888889,-19.02777777777777,87.13888888888889,-19.02777777777777C87.13888888888889,-19.02777777777777,87.13888888888889,-10.472222222222221,87.13888888888889,-10.472222222222221C87.13888888888889,-10.472222222222221,73.91666666666667,-10.472222222222221,73.91666666666667,-10.472222222222221C73.91666666666667,-10.472222222222221,73.91666666666667,6.250000000000007,73.91666666666667,6.250000000000007C73.91666666666667,6.250000000000007,83.25,6.250000000000007,83.25,6.250000000000007C83.25,6.250000000000007,83.25,15.000000000000004,83.25,15.000000000000004C83.25,15.000000000000004,73.91666666666667,15.000000000000004,73.91666666666667,15.000000000000004C73.91666666666667,15.000000000000004,73.91666666666667,33.861111111111114,73.91666666666667,33.861111111111114C73.91666666666667,33.861111111111114,87.13888888888889,33.861111111111114,87.13888888888889,33.861111111111114C87.13888888888889,33.861111111111114,87.13888888888889,42.41666666666667,87.13888888888889,42.41666666666667C87.13888888888889,42.41666666666667,61.47222222222222,42.41666666666667,61.47222222222222,42.41666666666667C61.47222222222222,42.41666666666667,61.47222222222222,42.41666666666667,61.47222222222222,42.41666666666667" transform="matrix(0.45,0,0,1,-0.0013,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="#000000" stroke="#000000" d="M118.58333333333333,43.583333333333336C97.97222222222221,43.97222222222223,100.5,21.80555555555556,100.69444444444444,1.5833333333333357C100.69444444444444,-12.999999999999993,106.72222222222221,-20.388888888888886,118.58333333333333,-20.388888888888886C132.58333333333331,-20.388888888888886,136.66666666666666,-9.888888888888886,135.69444444444443,5.4722222222222285C135.69444444444443,5.4722222222222285,123.44444444444444,5.4722222222222285,123.44444444444444,5.4722222222222285C123.05555555555554,-1.1388888888888857,125,-10.666666666666664,118.58333333333333,-10.666666666666664C114.88888888888889,-10.666666666666664,113.13888888888889,-7.55555555555555,113.13888888888889,-1.5277777777777715C113.13888888888889,-1.5277777777777715,113.13888888888889,24.91666666666667,113.13888888888889,24.91666666666667C113.13888888888889,30.94444444444445,114.88888888888889,34.05555555555556,118.58333333333333,34.05555555555556C125,34.05555555555556,123.44444444444444,24.138888888888893,123.63888888888889,17.138888888888893C123.63888888888889,17.138888888888893,135.69444444444443,17.138888888888893,135.69444444444443,17.138888888888893C136.27777777777777,32.111111111111114,132.77777777777777,43.19444444444445,118.58333333333333,43.583333333333336C118.58333333333333,43.583333333333336,118.58333333333333,43.583333333333336,118.58333333333333,43.583333333333336" transform="matrix(0.45,0,0,1,-0.0072,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="#000000" stroke="#000000" d="M151.47222222222223,42.41666666666667C151.47222222222223,42.41666666666667,151.47222222222223,-19.02777777777777,151.47222222222223,-19.02777777777777C151.47222222222223,-19.02777777777777,163.91666666666666,-19.02777777777777,163.91666666666666,-19.02777777777777C163.91666666666666,-19.02777777777777,163.91666666666666,6.055555555555557,163.91666666666666,6.055555555555557C163.91666666666666,6.055555555555557,172.86111111111111,6.055555555555557,172.86111111111111,6.055555555555557C172.86111111111111,6.055555555555557,172.86111111111111,-19.02777777777777,172.86111111111111,-19.02777777777777C172.86111111111111,-19.02777777777777,185.30555555555554,-19.02777777777777,185.30555555555554,-19.02777777777777C185.30555555555554,-19.02777777777777,185.30555555555554,42.41666666666667,185.30555555555554,42.41666666666667C185.30555555555554,42.41666666666667,172.86111111111111,42.41666666666667,172.86111111111111,42.41666666666667C172.86111111111111,42.41666666666667,172.86111111111111,15.000000000000004,172.86111111111111,15.000000000000004C172.86111111111111,15.000000000000004,163.91666666666666,15.000000000000004,163.91666666666666,15.000000000000004C163.91666666666666,15.000000000000004,163.91666666666666,42.41666666666667,163.91666666666666,42.41666666666667C163.91666666666666,42.41666666666667,151.47222222222223,42.41666666666667,151.47222222222223,42.41666666666667C151.47222222222223,42.41666666666667,151.47222222222223,42.41666666666667,151.47222222222223,42.41666666666667" transform="matrix(0.45,0,0,1,-0.0012,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="#000000" stroke="#000000" d="M201.47222222222226,42.41666666666667C201.47222222222226,42.41666666666667,201.47222222222226,-19.22222222222222,201.47222222222226,-19.22222222222222C201.47222222222226,-19.22222222222222,210.41666666666669,-19.22222222222222,210.41666666666669,-19.22222222222222C210.41666666666669,-19.22222222222222,223.83333333333337,13.05555555555556,223.83333333333337,13.05555555555556C223.83333333333337,13.05555555555556,223.83333333333337,-19.22222222222222,223.83333333333337,-19.22222222222222C223.83333333333337,-19.22222222222222,234.1388888888889,-19.22222222222222,234.1388888888889,-19.22222222222222C234.1388888888889,-19.22222222222222,234.1388888888889,42.41666666666667,234.1388888888889,42.41666666666667C234.1388888888889,42.41666666666667,225.58333333333337,42.41666666666667,225.58333333333337,42.41666666666667C225.58333333333337,42.41666666666667,212.16666666666669,8.19444444444445,212.16666666666669,8.19444444444445C212.16666666666669,8.19444444444445,212.16666666666669,42.41666666666667,212.16666666666669,42.41666666666667C212.16666666666669,42.41666666666667,201.47222222222226,42.41666666666667,201.47222222222226,42.41666666666667C201.47222222222226,42.41666666666667,201.47222222222226,42.41666666666667,201.47222222222226,42.41666666666667" transform="matrix(0.45,0,0,1,-0.0097,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="#000000" stroke="#000000" d="M268.5833333333333,43.583333333333336C247.97222222222223,43.583333333333336,250.5,21.611111111111114,250.69444444444443,1.5833333333333357C250.69444444444443,-12.999999999999993,256.52777777777777,-20.388888888888886,268.5833333333333,-20.388888888888886C280.6388888888889,-20.388888888888886,286.6666666666667,-12.999999999999993,286.6666666666667,1.5833333333333357C286.8611111111111,21.80555555555556,289.19444444444446,43.583333333333336,268.5833333333333,43.583333333333336C268.5833333333333,43.583333333333336,268.5833333333333,43.583333333333336,268.5833333333333,43.583333333333336M268.5833333333333,-10.666666666666664C263.9166666666667,-10.472222222222221,263.13888888888886,-6.194444444444443,263.13888888888886,-1.5277777777777715C263.13888888888886,-1.5277777777777715,263.13888888888886,24.91666666666667,263.13888888888886,24.91666666666667C263.13888888888886,30.94444444444445,264.88888888888886,34.05555555555556,268.5833333333333,34.05555555555556C272.27777777777777,34.05555555555556,274.22222222222223,30.94444444444445,274.22222222222223,24.91666666666667C274.22222222222223,24.91666666666667,274.22222222222223,-1.5277777777777715,274.22222222222223,-1.5277777777777715C274.22222222222223,-7.55555555555555,272.27777777777777,-10.666666666666664,268.5833333333333,-10.666666666666664C268.5833333333333,-10.666666666666664,268.5833333333333,-10.666666666666664,268.5833333333333,-10.666666666666664" transform="matrix(0.45,0,0,1,0.009,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="#000000" stroke="#000000" d="M301.47222222222223,42.41666666666667C301.47222222222223,42.41666666666667,301.47222222222223,-19.02777777777777,301.47222222222223,-19.02777777777777C301.47222222222223,-19.02777777777777,313.9166666666667,-19.02777777777777,313.9166666666667,-19.02777777777777C313.9166666666667,-19.02777777777777,313.9166666666667,33.861111111111114,313.9166666666667,33.861111111111114C313.9166666666667,33.861111111111114,326.1666666666667,33.861111111111114,326.1666666666667,33.861111111111114C326.1666666666667,33.861111111111114,326.1666666666667,42.41666666666667,326.1666666666667,42.41666666666667C326.1666666666667,42.41666666666667,301.47222222222223,42.41666666666667,301.47222222222223,42.41666666666667C301.47222222222223,42.41666666666667,301.47222222222223,42.41666666666667,301.47222222222223,42.41666666666667" transform="matrix(0.45,0,0,1,0.0017,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="#000000" stroke="#000000" d="M358.5833333333333,43.583333333333336C337.97222222222223,43.583333333333336,340.5,21.611111111111114,340.69444444444446,1.5833333333333357C340.69444444444446,-12.999999999999993,346.52777777777777,-20.388888888888886,358.5833333333333,-20.388888888888886C370.6388888888889,-20.388888888888886,376.6666666666667,-12.999999999999993,376.6666666666667,1.5833333333333357C376.8611111111111,21.80555555555556,379.19444444444446,43.583333333333336,358.5833333333333,43.583333333333336C358.5833333333333,43.583333333333336,358.5833333333333,43.583333333333336,358.5833333333333,43.583333333333336M358.5833333333333,-10.666666666666664C353.9166666666667,-10.472222222222221,353.13888888888886,-6.194444444444443,353.13888888888886,-1.5277777777777715C353.13888888888886,-1.5277777777777715,353.13888888888886,24.91666666666667,353.13888888888886,24.91666666666667C353.13888888888886,30.94444444444445,354.88888888888886,34.05555555555556,358.5833333333333,34.05555555555556C362.27777777777777,34.05555555555556,364.22222222222223,30.94444444444445,364.22222222222223,24.91666666666667C364.22222222222223,24.91666666666667,364.22222222222223,-1.5277777777777715,364.22222222222223,-1.5277777777777715C364.22222222222223,-7.55555555555555,362.27777777777777,-10.666666666666664,358.5833333333333,-10.666666666666664C358.5833333333333,-10.666666666666664,358.5833333333333,-10.666666666666664,358.5833333333333,-10.666666666666664" transform="matrix(0.45,0,0,1,-0.0033,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="#000000" stroke="#000000" d="M406.25,43.583333333333336C387.5833333333333,43.19444444444445,390.88888888888886,20.44444444444445,390.69444444444446,1.5833333333333357C390.69444444444446,-12.999999999999993,396.72222222222223,-20.388888888888886,408.77777777777777,-20.388888888888886C422.3888888888889,-20.388888888888886,427.25,-10.861111111111107,426.47222222222223,3.9166666666666714C426.47222222222223,3.9166666666666714,414.4166666666667,3.9166666666666714,414.4166666666667,3.9166666666666714C414.4166666666667,-2.694444444444443,415.38888888888886,-10.472222222222221,408.77777777777777,-10.666666666666664C404.88888888888886,-10.666666666666664,403.13888888888886,-7.55555555555555,403.13888888888886,-1.5277777777777715C403.13888888888886,-1.5277777777777715,403.13888888888886,24.91666666666667,403.13888888888886,24.91666666666667C403.13888888888886,30.94444444444445,404.88888888888886,34.05555555555556,408.77777777777777,34.05555555555556C414.02777777777777,34.05555555555556,414.80555555555554,26.47222222222223,414.4166666666667,19.66666666666667C414.4166666666667,19.66666666666667,407.4166666666667,19.66666666666667,407.4166666666667,19.66666666666667C407.4166666666667,19.66666666666667,407.4166666666667,10.722222222222225,407.4166666666667,10.722222222222225C407.4166666666667,10.722222222222225,426.8611111111111,10.722222222222225,426.8611111111111,10.722222222222225C426.8611111111111,10.722222222222225,426.8611111111111,42.41666666666667,426.8611111111111,42.41666666666667C426.8611111111111,42.41666666666667,418.30555555555554,42.41666666666667,418.30555555555554,42.41666666666667C418.30555555555554,42.41666666666667,416.75,38.13888888888889,416.75,38.13888888888889C415,41.05555555555556,410.72222222222223,43.583333333333336,406.25,43.583333333333336C406.25,43.583333333333336,406.25,43.583333333333336,406.25,43.583333333333336" transform="matrix(0.45,0,0,1,0.0049,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="#000000" stroke="#000000" d="M455.27777777777777,8.000000000000007C455.27777777777777,8.000000000000007,461.5,-19.02777777777777,461.5,-19.02777777777777C461.5,-19.02777777777777,472.97222222222223,-19.02777777777777,472.97222222222223,-19.02777777777777C472.97222222222223,-19.02777777777777,461.30555555555554,22.000000000000004,461.30555555555554,22.000000000000004C461.30555555555554,22.000000000000004,461.30555555555554,42.41666666666667,461.30555555555554,42.41666666666667C461.30555555555554,42.41666666666667,449.25,42.41666666666667,449.25,42.41666666666667C449.25,42.41666666666667,449.25,22.000000000000004,449.25,22.000000000000004C449.25,22.000000000000004,437.77777777777777,-19.02777777777777,437.77777777777777,-19.02777777777777C437.77777777777777,-19.02777777777777,449.44444444444446,-19.02777777777777,449.44444444444446,-19.02777777777777C449.44444444444446,-19.02777777777777,455.27777777777777,8.000000000000007,455.27777777777777,8.000000000000007" transform="matrix(0.45,0,0,1,-0.0043,65)" stroke-width="5" font-weight="bold" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-weight: bold;"></path>
    <path fill="none" stroke="none" d="M0,100L1000,100" stroke-width="5" stroke-linecap="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
  </svg>
</div>
&#13;
&#13;
&#13;

如果你想知道为什么在&#34; TECHNOLOGY&#34;右边有这么多空间,那是因为SVG中的最后一条路径是从x = 0到x = 1000的长水平线。这就是viewBox宽度为1000的原因。