為什么我的SVG圖像的內容消失了？以及如何使它居中並使其適合盒子中的物品？

Question

大家好，

我是掙扎於SVG的新手。 在Codepen內，我有一個可愛的svg圖像，它似乎已經消失了。 對於我的一生，我不了解它們是如何消失或為什么消失了。 我只希望svg圖像顯示在頁面中央，但是內容消失了。 我究竟做錯了什么？

我將包括聲明viewBox和CSS的部分，以使其簡短。

<html>

<svg viewBox="0 0 100 100" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>

  <symbol viewBox="0 0 100 100" height="500" width="500" y="50" x="50" id="svg_2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <path id="why" d="m351.08,636.241c-0.977,-0.314 -1.948,-0.646 -2.931,-0.941c-2.603,-0.782 -4.111,-2.604 -4.965,-5.098c-1.183,-3.452 -1.111,-6.846 0.056,-10.319c2.49,-7.41 6.638,-13.855 11.249,-20.071c4.029,-5.433 8.56,-10.356 14.081,-14.293c1.684,-1.2 3.56,-2.126 5.306,-3.241c0.408,-0.262 0.858,-0.749 0.936,-1.194c1.071,-6.17 2.085,-12.35 3.101,-18.529c0.054,-0.33 0.007,-0.677 0.007,-1.335c-1.389,1.895 -2.548,3.602 -3.84,5.201c-1.123,1.393 -2.32,2.746 -3.622,3.971c-1.898,1.786 -4.227,2.077 -6.716,1.58c-2.703,-0.541 -5.174,-1.637 -7.418,-3.198c-0.933,-0.649 -1.69,-1.551 -2.481,-2.295c-1.225,1.773 -2.445,3.724 -3.852,5.528c-1.594,2.048 -3.559,3.659 -6.178,4.298c-3.835,0.937 -8.463,-2.148 -9.296,-6.01c-0.922,-4.269 -0.559,-8.513 -0.083,-12.76c0.447,-3.993 1.048,-7.97 1.581,-11.954c-0.111,-0.138 -0.222,-0.275 -0.333,-0.414c-0.244,0.444 -0.436,0.931 -0.741,1.327c-7.101,9.197 -13.074,19 -16.362,30.26c-0.392,1.338 -1.151,1.779 -2.545,1.524c-0.739,-0.136 -1.484,-0.343 -2.17,-0.646c-2.521,-1.116 -2.935,-1.749 -2.601,-4.457c0.719,-5.823 1.518,-11.636 2.28,-17.453c0.314,-2.403 0.621,-4.808 0.948,-7.345c-2.354,0.113 -4.58,0.215 -6.806,0.329c-0.838,0.043 -1.676,0.175 -2.511,0.155c-0.976,-0.023 -1.445,0.396 -1.655,1.331c-0.85,3.77 -1.715,7.537 -2.624,11.293c-1.187,4.903 -3.706,8.994 -7.744,12.046c-3.259,2.463 -6.84,3.155 -10.693,1.433c-2.12,-0.948 -3.613,-2.555 -4.303,-4.741c-0.847,-2.685 -1.493,-5.432 -2.231,-8.171c-0.185,0.306 -0.432,0.735 -0.697,1.153c-2.968,4.685 -5.833,9.439 -8.954,14.02c-1.506,2.211 -3.495,3.983 -6.44,4.377c-5.024,0.672 -10.14,-2.989 -10.99,-8c-0.555,-3.271 -0.047,-6.473 0.74,-9.607c1.145,-4.556 2.533,-9.05 3.76,-13.586c0.501,-1.854 1.604,-2.856 3.521,-3.021c1.111,-0.096 2.211,-0.313 3.322,-0.416c1.116,-0.104 1.732,0.516 1.583,1.574c-0.26,1.849 -0.679,3.676 -1.037,5.511c-1.129,5.79 -2.273,11.577 -3.376,17.373c-0.163,0.857 -0.18,1.751 -0.179,2.627c0,0.313 0.191,0.819 0.411,0.893c0.309,0.104 0.856,0.011 1.071,-0.217c0.625,-0.661 1.141,-1.427 1.69,-2.159c5.949,-7.924 10.624,-16.599 14.956,-25.47c0.587,-1.201 0.96,-2.536 1.233,-3.852c0.219,-1.056 0.739,-1.517 1.719,-1.316c2.015,0.41 4.024,0.868 6.009,1.403c0.833,0.225 1.125,0.961 1.031,1.814c-0.593,5.355 -1.259,10.704 -1.746,16.068c-0.187,2.052 -0.028,4.146 0.098,6.212c0.058,0.953 0.408,1.95 1.457,2.294c1.131,0.372 2.098,-0.056 2.93,-0.881c2.497,-2.476 3.818,-5.591 4.705,-8.891c1.354,-5.041 2.611,-10.107 3.839,-15.18c0.388,-1.601 1.223,-2.552 2.879,-2.717c1.23,-0.123 2.461,-0.323 3.693,-0.338c3.8,-0.047 7.6,-0.037 11.399,-0.009c0.787,0.006 1.152,-0.105 1.317,-1.041c1.617,-9.189 3.213,-18.385 5.018,-27.539c1.252,-6.354 3.467,-12.412 6.089,-18.349c1.427,-3.23 3.551,-4.644 6.984,-4.182c1.183,0.159 2.392,0.26 3.527,0.597c2.211,0.656 3.409,2.155 3.217,4.454c-0.278,3.331 -0.679,6.672 -1.333,9.947c-2.655,13.292 -6.721,26.159 -11.922,38.672c-0.118,0.283 -0.223,0.571 -0.18,0.938c1.241,-1.446 2.487,-2.889 3.723,-4.34c3.08,-3.617 7.474,-4.275 11.492,-1.731c1.799,1.139 2.473,2.851 2.176,4.834c-0.624,4.18 -1.478,8.324 -2.097,12.503c-0.544,3.667 -0.925,7.359 -1.308,11.047c-0.076,0.733 0.081,1.523 0.281,2.245c0.376,1.355 1.328,1.574 2.268,0.534c0.532,-0.59 1.054,-1.228 1.414,-1.928c2.68,-5.216 5.547,-10.353 7.883,-15.719c1.434,-3.293 2.03,-6.949 3.008,-10.44c0.15,-0.537 0.313,-1.072 0.501,-1.597c0.451,-1.256 0.641,-2.695 2.223,-3.168c2.152,-0.642 4.268,-0.647 6.254,0.495c0.337,0.194 0.631,0.802 0.616,1.206c-0.057,1.535 -0.08,3.104 -0.425,4.588c-0.758,3.257 -1.906,6.432 -2.517,9.711c-0.617,3.319 -0.825,6.72 -1.11,10.093c-0.084,1.002 -0.102,2.374 1.065,2.653c0.627,0.15 1.651,-0.613 2.244,-1.214c1.259,-1.274 2.457,-2.638 3.496,-4.095c4.668,-6.551 8.467,-13.526 10.098,-21.506c0.215,-1.051 0.371,-2.129 0.406,-3.199c0.038,-1.156 0.664,-1.428 1.635,-1.374c0.158,0.009 0.314,0.059 0.473,0.083c4.083,0.631 4.188,0.85 4.574,4.958c0.71,7.571 0.132,15.091 -0.669,22.61c-0.571,5.36 -1.153,10.72 -1.721,16.081c-0.041,0.39 -0.005,0.788 -0.005,1.331c2.141,-0.517 4.21,-1.015 6.279,-1.515c1.656,-0.399 2.405,0.121 2.57,1.812c0.043,0.436 0.037,0.879 0.027,1.318c-0.047,1.976 -0.364,2.417 -2.216,3.023c-2.007,0.658 -4.002,1.364 -6.038,1.918c-1.221,0.332 -1.789,0.884 -2.007,2.219c-1.224,7.502 -4.099,14.462 -7.15,21.371c-2.45,5.548 -5.431,10.753 -9.187,15.518c-0.766,0.971 -1.462,2.004 -2.103,3.061c-2.238,3.694 -5.323,6.317 -9.464,7.646c-0.956,0.001 -1.916,0.001 -2.877,0.001zm23.134,-45.607c-0.137,-0.093 -0.273,-0.187 -0.411,-0.279c-1.13,0.804 -2.282,1.58 -3.388,2.417c-4.979,3.774 -8.565,8.731 -12.06,13.835c-3.738,5.462 -6.414,11.288 -7.426,17.827c-0.295,1.91 -0.397,3.873 -0.341,5.804c0.033,1.121 0.823,1.351 1.773,0.688c0.486,-0.34 0.959,-0.743 1.319,-1.21c1.367,-1.766 2.743,-3.529 4.013,-5.365c5.267,-7.621 8.967,-16.075 12.834,-24.431c1.399,-3.018 2.468,-6.187 3.687,-9.286zm-39.855,-94.892c-2.8,2.329 -11.577,36.271 -11.531,43.604c0.065,-0.035 0.164,-0.055 0.19,-0.109c0.177,-0.356 0.375,-0.708 0.497,-1.083c3.187,-9.768 6.492,-19.498 9.472,-29.328c1.019,-3.359 1.256,-6.963 1.749,-10.468c0.108,-0.765 -0.215,-1.59 -0.377,-2.616z" fill="#1E6C81" clip-rule="evenodd" fill-rule="evenodd"/>

和CSS ...

html {
  display: flex;
  justify-content: center;
  align-items: center;
  background:linear-gradient(pink, mediumpurple);
  width: 100vw;
  height: 100vh;
}


svg{
    height: 75vh;
    width: 25vw;
    border: 5px solid black; 

}

Answer 1

羅伯特有存在理由。 起始路徑點（m351.08,636.241）表示您的視圖框太小。
容器和blalalalala外部的符號視圖框的高度和寬度

像這樣編輯代碼：

<symbol viewBox="0 0 1000 1000" id="svg_2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <path...

刪除變換屬性

<use xlink:href="#svg_2" id="svg_3"/>

最后，我希望您能找到筆問題的答案。 祝好運。

Answer 2

正如其他人所述，主要問題是您的viewBox值不正確。 內容大約為500x500，但是您原來的viewBox的寬度和高度為100。因此它太小了。 在更新的Codepen中，您的viewBoxes太大了。 5000x5000大約太大了10倍。

如果我們將500x500 viewBoxes用於<svg>和<symbol> ，則會得到更好的尺寸結果。 請注意，您的內容與原點之間的偏移量很小，因此我還必須給符號viewBox提供非零的x和y值。

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>

  <symbol viewBox="55 145 500 500" height="500" width="500" id="svg_2" ...

更新的代碼筆

為什么我的SVG圖像的內容消失了？以及如何使它居中並使其適合盒子中的物品？

問題描述

2 個解決方案

解決方案1
0 2018-02-20 03:12:13

解決方案2
0 2018-02-20 07:25:44

為什么我的SVG圖像的內容消失了？ 以及如何使它居中並使其適合盒子中的物品？

問題描述

2 個解決方案

解決方案1 0 2018-02-20 03:12:13

解決方案2 0 2018-02-20 07:25:44

為什么我的SVG圖像的內容消失了？以及如何使它居中並使其適合盒子中的物品？

解決方案1
0 2018-02-20 03:12:13

解決方案2
0 2018-02-20 07:25:44