为什么我的SVG图像的内容消失了？以及如何使它居中并使其适合盒子中的物品？

Question

The codepen I'm working on... 我正在研究的Codepen ...

Hello everyone, 大家好，

I am a newb struggling with SVG. 我是挣扎于SVG的新手。 Inside the codepen, I have a cute svg image that seems to have disappeared. 在Codepen内，我有一个可爱的svg图像，它似乎已经消失了。 For the life of me, I don't understand how or why they just disappeared. 对于我的一生，我不了解它们是如何消失或为什么消失了。 I just wanted the svg image to display in the center of the page but the contents have disappeared. 我只希望svg图像显示在页面中央，但是内容消失了。 What am I doing wrong? 我究竟做错了什么？

I'm just going to include the parts where I declare the viewBox and the CSS to keep it short. 我将包括声明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"/>

and the CSS... 和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

Robert have raison. 罗伯特有存在理由。 The start path point (m351.08,636.241) signify that your view box is too smaller. 起始路径点（m351.08,636.241）表示您的视图框太小。
Symbol view box height and width outside container and blalalalalala 容器和blalalalala外部的符号视图框的高度和宽度

Edit your code like this: 像这样编辑代码：

<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...

Remove transform property 删除变换属性

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

Finally I hope you find an answer for your pen question. 最后，我希望您能找到笔问题的答案。 Good luck. 祝好运。

Answer 2

As others have stated, the main problem is that your viewBox values are incorrect. 正如其他人所述，主要问题是您的viewBox值不正确。 The content is roughly 500x500, but your original viewBox had a width and height of 100. So it was too small. 内容大约为500x500，但是您原来的viewBox的宽度和高度为100。因此它太小了。 In your updated codepen, your viewBoxes are way too big. 在更新的Codepen中，您的viewBoxes太大了。 5000x5000 is roughly 10x too big. 5000x5000大约太大了10倍。

If we use 500x500 viewBoxes for the <svg> and <symbol> , you get a much better sized result. 如果我们将500x500 viewBoxes用于<svg>和<symbol> ，则会得到更好的尺寸结果。 Note that your content is a little offset from the origin, so I had to give the symbol viewBox non-zero x and y values also. 请注意，您的内容与原点之间的偏移量很小，因此我还必须给符号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" ...

Updated codepen 更新的代码笔

为什么我的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