我为我的设计作品集制作了一个 SVG 文件，用于放置在图像上。画板的尺寸为 780px w 和 120px h。但出于某种原因，它在我的网站上看起来像这样:click to see what it's doing
HTML: 莎拉的投资组合
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<div id="nav">
<a href="#"> HOME </a>
<a href="#"> PORTFOLIO </a>
<a href="#"> ABOUT</a>
<a href="#"> CONTACT </a>
</div>
<div id="nameheader">
<img src="images/nameheadertext.svg" alt="text" id="nameheadertext" onerror="this.onerror=null;this.src='images/nameheader.png'"/>
<img src="images/nameheaderimage.png" alt="header" />
</div>
<div id="blackline"></div>
<div id="content">
<img id="welcome" src="images/welcome.svg" onerror="this.onerror=null;this.src='images/welcome.png'" alt="Welcome"/>
<div id="textbox">
<p>My name is Sarah Monroe. I’m a designer and a photographer. I’m a senior at Middle Tennessee State Univeristy; set to graduate in August 2016. My major is Visual Communications with minors in Art and Marketing. This site hosts all of my design work - both for clients and for school. See the “about” page for more information about me and to see a link to my photography. Thank you for stopping by.
</p>
</div>
</div>
</div>
</body>
</html>
这是它的 CSS 代码。它被称为:“#nameheadertext”我还包含了图像 CSS incase，这是需要的。
#nameheader {
width: inherit;
height: auto;
}
#nameheader img {
width: 100%;
height: auto;
display: block;
}
#nameheadertext {
position: absolute;
width: 780 px;
height: 120 px;
}
SVG: .st0{填充:#FFFFFF;}
<image style="overflow:visible;opacity:0.56;enable-background:new ;" width="771" height="128" xlink:href="F4B2ADFE1A88AB3E.png" transform="matrix(0.9987 0 0 0.9922 96.3999 342.3999)">
</image>
<g>
<g>
<path class="st0" d="M115.6,414c3,2.1,6.9,2.8,10.9,2c-4.3- 11.4,2-26.4,17.4-26.4c4.1,0,7.6,1.6,10.1,4.1l10.9-10.7
c1-14.9,4.4-23.8,14-23.8c7.3,0,9.5,7.8,1.9,15.2l-8.9,8.7c- 0.2,3.6-0.3,7.9-0.3,12.8c0,17.9-8.5,32.7-24.7,32.7
c-8.7,0-14.7-3.6-18.1-8.4c-5.7,1.4-11.2,0.5-15.5-3.3L115.6,414z M132.6,413.6c1.7-1,3.4-2.3,5-3.8l12.9-12.7
c-1.8-1.4-4.1-2.3-6.6-2.3C133.8,394.8,129.5,405.5,132.6,413.6z M135,417.6c2.4,2.9,6.4,4.8,11.8,4.8
c11.8,0,17.7-11.4,17.7-26.6v-5.7l-7.5,7.5c2.7,5.5,2.2,12.4-3,16.7l-3.2-3.3c3.3-3.2,3.8-6.9,2.6-10l-11.8,11.5
C139.5,414.6,137.3,416.3,135,417.6z M172.5,375.4l3.1-3c5-4.7,4.3-7.4,2.1-7.4C175.3,365,173.6,368.2,172.5,375.4z"/>
<path class="st0" d="M214,404.6c1,0.4,2.4,1.6,2.9,2.7c-6.4,7.4-13.7,14.2-20.1,14.2c-3.9,0-6.3-2.1-6.7-5c-3.7,3-7.5,5-10.7,5
c-6.2,0-8.5-5.3-5.3-11l10.8-18.6c3.3-5.6,9-8.9,13.2-8.9c5,0,8.4,4.5,8.1,7.8h4.4l-12.4,21.8c-1.8,3-0.8,4.2,0.9,4.2
c3.4,0,8.8-5.1,14.4-11.5L214,404.6z M181,412.6c-1.8,3-0.8,4.2,0.9,4.2c3.2,0,7.8-3.5,12.4-10.8l6-10.5c3.8-7-4.4-8.8-8.6-1.6
L181,412.6z"/>
<path class="st0" d="M231.1,396.4c0.9-1.6,0.5-3.1-0.4-4.4l-1-1.3c-6.1,8.4-9,12.2-12.7,16.5c-1.1-0.7-2.2-1.7-2.9-2.7
c5-5.9,9.6-12.4,13-17.2l-0.7-0.9c-2.7-3.6-2.4-7.9,2-11.8l4,4.4c-1.6,1.5-1.6,3-0.4,4.4l4.3,5.2c2.5,3,3.8,5.8,1.1,10.4
l-7.7,13.5c-1.8,3-0.8,4.2,0.9,4.2c3.4,0,8.8-5.1,14.4-11.5l0.5-0.6c1,0.4,2.4,1.6,2.9,2.7c-6.4,7.4-13.7,14.2-20.1,14.2
c-6.2,0-8.5-5.3-5.3-11L231.1,396.4z"/>
<path class="st0" d="M281.8,404.6c1,0.4,2.4,1.6,2.9,2.7c-6.4,7.4-13.7,14.2-20.1,14.2c-3.9,0-6.3-2.1-6.7-5c-3.7,3-7.5,5-10.7,5
c-6.2,0-8.5-5.3-5.3-11l10.8-18.6c3.3-5.6,9-8.9,13.2-8.9c5,0,8.4,4.5,8.1,7.8h4.4L266,412.6c-1.8,3-0.8,4.2,0.9,4.2
c3.4,0,8.8-5.1,14.4-11.5L281.8,404.6z M248.7,412.6c-1.8,3-0.8,4.2,0.9,4.2c3.2,0,7.8-3.5,12.4-10.8l6-10.5
c3.8-7-4.4-8.8-8.6-1.6L248.7,412.6z"/>
<path class="st0" d="M318.1,404.6c1,0.4,2.4,1.6,2.9,2.7c-6.4,7.4-13.7,14.2-20.1,14.2c-6.2,0-8.5-5.3-5.3-11l10-17.4
c3.3-5.7-1.9-7.6-13.8,7.3l-11.7,20.4h-7.8l30.7-53.3h7.7l-12.3,21.4c3.8-4,7.4-5.8,10.7-5.8c4.3,0,7.5,4.2,4.1,10.1l-11.1,19.5
c-1.8,3-0.8,4.2,0.9,4.2c3.4,0,8.8-5.1,14.4-11.5L318.1,404.6z"/>
<path class="st0" d="M409.6,376.9c3.7-6.4-3.2-8-17.8,12.6l-0.1,0.1l-17.9,31.2H366l25.3-43.9c3.6-6.3-3-7.9-17.3,11.9l-18.4,32
h-7.9l26.3-45.7c-8.3,4.2-21.4,4.4-24.9,10.6c-3.8,6.4,2.9,9.2,2.9,9.2l-2.9,5c-5.1-2-11-8.2-6.1-16.9c6.3-11,23.2-7,36.8-17.8
l3.9,6.7l-2.1,3.6c4.9-6.1,9.2-8.7,13.2-8.7c4.1,0,7.2,3.9,4.5,9.3c5.1-6.5,9.6-9.3,13.8-9.3c4.3,0,7.5,4.2,4.1,10.1l-28.5,49.4
c-1.1,1.9-1.6,5.6,1,6.8l-3.3,5.6c-6.4-3.2-6.7-10.3-3.6-15.7L409.6,376.9z"/>
<path class="st0" d="M428.8,414.8c-10.4,13.1-28.9,7-19.2-9.7l3.3-5.7l3.8-6.6c4.4-7.7,9-10.1,14.9-10.1c7.3,0,11.5,7.6,6.9,15.7
l-7.3,12.5c3.8-0.1,8.1-1.9,11.6-5.7l0.5-0.6c1,0.4,2.4,1.6,2.9,2.7c-3.9,4.7-11.2,7.5-15.8,7.5L428.8,414.8L428.8,414.8z
M426.6,405.2h0.4l5.6-9.6c4.7-8-2.7-11.6-8.1-2.4l-3.7,6.3l-5.8,10.1c-4.6,8,4.2,9.2,7.8,3l0.1-0.1c-0.4-0.7-0.7-1.6-0.7-2.6
C422.1,407.2,424.1,405.2,426.6,405.2z"/>
<path class="st0" d="M479.7,404.6c1,0.4,2.4,1.6,2.9,2.7c-6.4,7.4-13.7,14.2-20.1,14.2c-6.2,0-8.5-5.3-5.3-11l10-17.4
c3.3-5.7-1.9-7.6-13.7,7.1l-11.8,20.5H434l21.4-37h7.7l-2.9,5c3.8-4,7.3-5.8,10.7-5.8c4.3,0,7.5,4.2,4.1,10.1l-11.1,19.5
c-1.8,3-0.8,4.2,0.9,4.2c3.4,0,8.8-5.1,14.4-11.5L479.7,404.6z"/>
<path class="st0" d="M496.8,396.4c0.9-1.6,0.5-3.1-0.4-4.4l-1-1.3c-6.1,8.4-9,12.2-12.7,16.5c-1.1-0.7-2.2-1.7-2.9-2.7
c5-5.9,9.6-12.4,13-17.2l-0.7-0.9c-2.7-3.6-2.4-7.9,2-11.8l4,4.4c-1.6,1.5-1.6,3-0.4,4.4l4.3,5.2c2.5,3,3.8,5.8,1.1,10.4
l-7.7,13.5c-1.8,3-0.8,4.2,0.9,4.2c3.4,0,8.8-5.1,14.4-11.5l0.5-0.6c1,0.4,2.4,1.6,2.9,2.7c-6.4,7.4-13.7,14.2-20.1,14.2
c-6.2,0-8.5-5.3-5.3-11L496.8,396.4z"/>
<path class="st0" d="M530,414.8c-10.4,13.1-28.9,7-19.2-9.7l3.3-5.7l3.8-6.6c4.4-7.7,9-10.1,14.9-10.1c7.3,0,11.5,7.6,6.9,15.7
l-7.3,12.5c3.8-0.1,8.1-1.9,11.6-5.7l0.5-0.6c1,0.4,2.4,1.6,2.9,2.7c-3.9,4.7-11.2,7.5-15.8,7.5L530,414.8L530,414.8z
M527.8,405.2h0.4l5.6-9.6c4.7-8-2.7-11.6-8.1-2.4l-3.7,6.3l-5.8,10.1c-4.6,8,4.2,9.2,7.8,3l0.1-0.1c-0.4-0.7-0.7-1.6-0.7-2.6
C523.3,407.2,525.3,405.2,527.8,405.2z"/>
<path class="st0" d="M551.4,406.3l-0.7,1.3c-3.6,6.2-0.7,9.2,4,9.2c5.4,0,12.5-5.1,18.1-11.5l0.5-0.6c1,0.4,2.4,1.6,2.9,2.7
c-6.4,7.4-15,14.2-23.8,14.2c-9.1,0-13.2-7.5-8.4-15.8l8.1-13.8c3.3-5.6,8.2-8.9,14.4-8.9c6.3,0,10.3,5.3,6.1,12.4l-1.1,1.9
C565.7,407.4,556.4,408.3,551.4,406.3z M553.6,402.5c2.9,1,7.8,1.2,11.5-5.1l1.1-1.9c4.6-8-3.3-9.3-7.7- 1.6L553.6,402.5z"/>
<path class="st0" d="M616.9,412.7l22.3-38.5c-0.4,0-0.7-0.1-1.1-0.1c-15.1,0-22.6,14-16.5,21.8l-4.4,4
c-9.9-8.9-1.7-31.6,20.6-31.6c41.4,0,27.3,59-3.3,59c-7,0-11.6-2.7-15.8-5.1c-3.5,4.4-7.6,6.1-12.4,6.1c-6.4,0-9.5-3.8-9.5-7.8
c0-4.1,3.6-8.5,10.8-8.5c3.2,0,5.9,1,8.5,2.2L616.9,412.7z M613.3,419.3c-2-0.8-4.1-1.4-6.4-1.4c-2.2,0-3.3,1.1-3.3,2.2
c0,1.2,1.2,2.3,3.7,2.3C610.4,422.4,611.9,421.3,613.3,419.3z M646,375.5l-24.1,41.9c3.7,2.1,7.5,4,12.5,4
C653.7,421.4,666.6,383,646,375.5z"/>
<path class="st0" d="M672,406.3l-0.7,1.3c-3.6,6.2-0.7,9.2,4,9.2c5.4,0,12.5-5.1,18.1-11.5l0.5-0.6c1,0.4,2.4,1.6,2.9,2.7
c-6.4,7.4-15,14.2-23.8,14.2c-9.1,0-13.2-7.5-8.4-15.8l8.1-13.8c3.3-5.6,8.2-8.9,14.4-8.9c6.3,0,10.3,5.3,6.1,12.4l-1.1,1.9
C686.2,407.4,676.9,408.3,672,406.3z M674.2,402.5c2.9,1,7.8,1.2,11.5-5.1l1.1-1.9c4.6-8-3.3-9.3-7.7-1.6L674.2,402.5z"/>
<path class="st0" d="M690.4,415.3l4.8-2.5c0,0,1,2.8,3.6,2.8c7.3,0,5.7-14.4,8.7-22.4c-2.7,3.6-6.6,9-11,14.1
c-1.1-0.7-2.2-1.7-2.9-2.7c7-8.1,13.9-18.2,17.1-22.6l5.8,3.1c-4.7,9.8-4.2,21.1-6.7,28.4c3-2.1,6.4-5,9.3-8.4l0.5-0.6
c1.1,0.3,2.4,1.5,2.9,2.7c-5.8,6.7-13.5,13-21.4,14c-0.1,0-0.1,0.1-0.2,0.1c-0.7,0.1-1.4,0.1-2.1,0.1
C691.9,421.5,690.4,415.3,690.4,415.3z"/>
<path class="st0" d="M738.8,404.6c1,0.4,2.4,1.6,2.9,2.7c-6.4,7.4-13.7,14.2-20.1,14.2c-6.2,0-8.5-5.3-5.3-11l15.5-26.8h7.7
L723,412.6c-1.8,3-0.8,4.2,0.9,4.2c3.4,0,8.8-5.1,14.4-11.5L738.8,404.6z M740.5,370.9c2.5,0,4.5,2,4.5,4.5s-2,4.4-4.5,4.4
c-2.5,0-4.4-1.9-4.4-4.4S738,370.9,740.5,370.9z"/>
<path class="st0" d="M745.8,422.6l2.1-3.6c-2.6,1.6-5.2,2.6-7.3,2.6c-6.2,0-8.5-5.3-5.3-11l10.8-18.6c3.3-5.6,9-8.9,13.2-8.9
c4.8,0,8.1,4.2,8.1,7.4h4.5l-17.2,29.5c6.1-2.6,11.5-7.3,17.9-14.7l0.5-0.6c1,0.4,2.4,1.6,2.9,2.7c-8.4,9.8-16.3,15.2-24.3,17.8
l-5.8,10.1c-5.5,9.5-16.9,7.9-16.9,0.5C728.9,430,735.4,425.7,745.8,422.6z M739.4,434l3.5-6.2c-5.8,2.3-7.7,4.6-7.7,6.6
C735.1,436.4,737.7,436.8,739.4,434z M742,412.6c-1.8,3-0.8,4.2,0.9,4.2c3.3,0,7.9-3.6,12.6-11.1l5.8-10.2c3.8-7-4.4-8.8-8.6-1.6
L742,412.6z"/>
<path class="st0" d="M809.4,404.6c1,0.4,2.4,1.6,2.9,2.7c-6.4,7.4-13.7,14.2-20.1,14.2c-6.2,0-8.5-5.3-5.3-11l10-17.4
c3.3-5.7-1.9-7.6-13.7,7.1l-11.8,20.5h-7.8l21.4-37h7.7l-2.9,5c3.8-4,7.3-5.8,10.7-5.8c4.3,0,7.5,4.2,4.1,10.1l-11.1,19.5
c-1.8,3-0.8,4.2,0.9,4.2c3.4,0,8.8-5.1,14.4-11.5L809.4,404.6z"/>
<path class="st0" d="M806.1,415.3l4.8-2.5c0,0,1,2.8,3.6,2.8c7.3,0,5.7-14.4,8.7-22.4c-2.7,3.6-6.6,9-11,14.1
c-1.1-0.7-2.2-1.7-2.9-2.7c7-8.1,13.9-18.2,17.1-22.6l5.8,3.1c-4.7,9.8-4.2,21.1-6.7,28.4c3-2.1,6.4-5,9.3-8.4l0.5-0.6
c1.1,0.3,2.4,1.5,2.9,2.7c-5.8,6.7-13.5,13-21.4,14c-0.1,0-0.1,0.1-0.2,0.1c-0.7,0.1-1.4,0.1-2.1,0.1
C807.5,421.5,806.1,415.3,806.1,415.3z"/>
</g>
</g>
</g>
</svg>
最佳答案
去除像素数量和单位后的空格。在“780/120”之后和“px”之前。
应该是这样的
width:780px;
height:120px;
关于html - 我的 SVG 文件太大了，占据了整个网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34168237/