Chrome:SVG容器无法响应缩放 [英] Chrome: SVG container not rescaling responsively

查看:89
本文介绍了Chrome:SVG容器无法响应缩放的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个SVG被有效地用作遮罩";它显示在另一个div的顶部,并带有背景图像,以便该图像可以窥视SVG的未填充区域. SVG本身对文档的高度(而不是宽度)作出响应.到目前为止,一切正常.

I have an SVG that is effectively being used as a 'mask'; it's displayed over the top of another div with a background image so that the image peeks through the unfilled areas of the SVG. The SVG itself is responsive to the height of the document (rather than the width). This works fine so far.

但是,我刚刚意识到,如果您调整(Chrome)浏览器的大小,背景图像就会溢出到SVG遮罩的范围之外;但是,如果刷新了调整大小的页面,则所有内容都会按预期显示-仅在调整大小时出现 ,并且仅在Chrome中显示(哦,显然还有Opera).可以在FF和Safari中正常工作.

However, I've just been made aware that if you resize the (Chrome) browser, the background image overflows out of the bounds of the masking SVG; however, if you refresh the resized page, everything appears as expected - it only occurs on resize, and only in Chrome (oh, and Opera too, apparently). Works as expected in FF and Safari.

我在此处包括了带有内嵌SVG的演示(以及 jsFiddle ),但是是内联还是带有<img />标记似乎无关紧要-结果是相同的.

I've included a demo here (and a jsFiddle) with an inline SVG, however it doesn't seem to matter if it's inline or with an <img /> tag - the results are the same.

似乎与包含元素有关;如果我打开检查器并将包含元素的padding设置为0后将其拧紧,那么它似乎会弄清楚自己并突然按预期方式出现;但是,如果我在加载的CSS中包含该规则,则没有任何区别.我什至尝试通过Javascript在页面大小调整上触发类似的CSS属性,但是并没有什么区别.

It seems to be somehow related to the containing element; if I open up the inspector and set the containing element's padding to 0 after it goes screwy, then it seems to figure itself out and suddenly appear as expected; however if I include that rule in the loaded CSS then it makes no difference. I even tried triggering similar CSS properties on page resize via Javascript, but it hasn't made any difference.

我丢失了某些东西,还是偶然发现了一个错误?

Am I missing something, or have I stumbled across a bug?

#splash {
  position:               relative;
  height:                 100vh;
  padding:                3rem;
  overflow:               hidden;
  display:                flex;
  -webkit-box-align:      center;
  align-items:            center;
  background-color:       #DDDDDD;
}

#logowrapper {
  position:               relative;
  width:                  auto;
  height:                 60%;
  margin:                 auto;
}

#logowrapper .kitten {
  position:               absolute;
  top:                    0;
  left:                   0;
  bottom:                 0;
  right:                  0;
  background-image:       url('http://placekitten.com/200/300');
  background-size:        cover;
}

#logowrapper svg {
  position:               relative;
  width:                  auto;
  height:                 100%;
  z-index:                4;
}

<div id="splash">
  <div id="logowrapper">
    <div class="kitten"></div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 300" preserveAspectRatio="xMinYMin meet">
  <defs/>
  <g>
    <path stroke="none" fill="#DDDDDD" d="M110.95 215.1 Q100 225.6 100 240.7 100 256.25 110.75 266.85 121.45 277.5 137 277.5 153.9 277.5 165.45 267.4 177 257.35 177 242.5 177 226.85 166.7 216.1 155.6 204.6 137.5 204.6 121.85 204.6 110.95 215.1 M82.9 206.15 L82.2 206.05 80.3 206.05 Q75.15 206.05 71.55 207.25 66.35 208.95 66.35 212.7 66.35 215.65 67.75 216.9 L69.25 218.45 Q69.25 220.6 67.05 223.4 64.85 226.1 64.05 226.1 L63.8 226.1 Q62.45 225.9 60.35 223.3 58.25 220.75 58.25 218.4 58.25 217.8 59.6 217.1 60.95 216.3 60.95 214.7 L60.85 213.3 Q60.35 210.15 57.05 208.5 53.7 206.9 50.15 206.9 L32.8 206.9 27.25 207.75 Q21.85 209.3 21.85 213.1 21.85 214.8 23.35 216.2 24.85 217.8 28.4 219.3 29.9 219.9 35.1 226.2 40.3 232.5 44.5 239.15 45.2 240.05 45.4 242.35 L45.6 248.15 45.4 255.5 45 261.5 Q45 263.1 42.8 264.65 38.2 267.8 38.2 269.6 38.2 274.8 45.2 275.9 L58.55 276.5 61.45 276.5 64.35 276.6 Q69.45 276.6 72.2 275.6 75.85 274.1 77.25 270.45 L77.45 269.1 Q77.45 267.2 75.15 265.6 70.45 262.25 70.45 259.55 L70.45 238.95 86.05 218.7 Q86.3 218.45 91.45 216.9 95.1 215.75 95.1 212.05 95.1 208.35 93.45 207.15 91.6 205.95 88.5 205.95 L85.65 206.05 82.9 206.15 M127.75 222.3 Q130.15 219.2 133.85 219.2 141.8 219.2 146.9 232 151 242.15 151 251.7 151 256.7 148.6 259.6 146.2 262.4 142.2 262.4 135.1 262.4 129.75 249.5 125.35 238.95 125.35 230.4 125.35 225.5 127.75 222.3 M127 174.1 Q127.35 173.5 128.35 173.5 132.6 173.5 132.6 178.95 132.6 183.25 129 183.25 127.35 183.25 126.95 181.7 126.7 180.85 126.7 178.2 L126.65 176.9 126.6 175.7 Q126.6 174.7 127 174.1 M126.85 160.15 Q127.2 159.3 128.05 159.3 131.5 159.3 131.5 164.2 131.5 168.75 127.95 168.75 127.1 168.75 126.8 167.9 126.45 167.1 126.45 165.75 L126.5 164.8 126.6 163.8 126.55 163.5 126.5 162.2 Q126.5 161 126.85 160.15 M111.95 158.35 Q112.35 159 113.1 159 114.4 159 115.05 161.55 115.65 164.15 115.65 168.15 115.65 173.9 114.65 179 113.65 184.1 112.3 184.1 111.75 184.1 111.55 184.55 L111.35 185.8 Q111.35 186.95 112.3 187.65 113.2 188.35 114.7 188.35 L119.6 188.2 124.9 188.05 129.2 188.2 133.15 188.35 Q139 188.35 142.5 185.45 145.95 182.6 145.95 177.7 145.95 173.8 142.8 171.8 139.6 169.85 139.6 169.4 L142 166.2 Q143.1 164.4 143.1 162.15 143.1 157.75 139.35 155.9 136.65 154.55 131.8 154.55 L127.55 154.65 121.75 154.75 118.8 154.65 114.9 154.55 Q113.4 154.55 112.45 155.25 111.5 155.95 111.5 157 111.5 157.75 111.95 158.35 M106.65 123.3 L103.7 123.4 97.65 123.4 95.55 123.65 Q95.05 123.9 95.05 124.6 95.05 125.15 95.75 125.45 96.4 125.7 96.6 126 97.15 127.2 97.15 131.75 L97.05 134.45 96.8 136.4 Q96.6 137.2 95.9 137.6 95.2 137.95 95.2 138.45 95.2 139.45 96.45 139.45 L106.35 139.45 108.1 139.65 109.05 139.7 Q109.8 139.7 110.55 137.9 L111.2 135.45 110.9 134.3 Q110.55 133.9 110.05 133.9 109.7 133.9 108.65 135.5 107.5 137.1 104.5 137.1 102.9 137.1 102.55 136.65 102.25 136.15 102.25 133.95 102.25 133 102.4 132.65 102.6 132.35 103.15 132.35 104.35 132.35 104.65 133.55 104.9 134.75 105.45 134.75 106.15 134.75 106.6 133.75 107 132.7 107 131.05 107 129.4 106.65 128.5 106.25 127.6 105.6 127.6 104.8 127.6 104.6 128.85 104.35 130.1 103.5 130.1 L102.3 129.95 Q102.05 129.8 102.05 129.05 L102.05 127.05 Q102.05 126.2 102.45 125.9 L104 125.65 Q107.05 125.65 108 127.2 L109 127.85 Q110.25 127.85 110.25 126.2 110.25 124.95 109.65 123.95 109.1 122.95 108.4 122.95 L106.65 123.3 M150.65 132.95 L149.4 132.85 148.85 132.5 Q148.85 132.05 149.45 130.75 150 129.5 150.4 129.5 L151.55 130.75 Q152.3 132.05 152.3 132.55 L151.85 132.85 150.65 132.95 M158.5 133.55 Q156.15 128.3 155.2 126.7 153 123.05 150.85 123.05 148.25 123.05 148.25 126 L147.2 129.6 Q146.05 132.8 144.95 134.8 143.55 137.4 142.8 137.4 142.3 137.4 142.1 137.7 141.95 137.95 141.95 138.35 141.95 139.1 142.75 139.4 L145.5 139.7 Q148.9 139.7 148.9 138.3 148.9 137.75 148.2 137.5 147.45 137.2 147.45 136.9 147.45 136.1 147.85 135.9 L149.95 135.65 150.55 135.65 152.8 135.85 Q153.55 136.05 153.55 136.75 L153.1 137.3 Q152.15 137.75 152.15 138.35 152.15 139.25 153.5 139.45 L157.4 139.7 160.8 139.3 Q161.8 138.95 161.8 138.05 161.8 137.25 160.95 137.25 160.2 137.25 158.5 133.55 M125.05 123.2 L122.1 123.6 Q121.05 124.05 121.05 124.8 121.05 125.6 121.55 125.8 122.3 126.15 122.65 127.1 L126.95 138.15 Q127.3 139.05 127.75 139.4 128.15 139.75 128.9 139.75 130.15 139.75 131.15 137.75 L132.5 134.15 Q133.15 132.2 133.65 132.2 134.25 132.2 134.95 134.15 L136.25 137.75 Q137.2 139.7 138.45 139.7 139.2 139.7 139.65 139.15 L140.85 136.8 144.35 127.65 Q144.95 126.15 145.5 125.6 146.2 125 146.2 124.6 146.2 123.15 143.5 123.15 141.8 123.15 141 123.5 140.25 123.8 140.25 124.5 140.25 125.25 141 125.55 141.75 125.85 141.75 126.25 L141.05 128.7 Q140.35 130.45 139.95 130.45 139.6 130.45 138.7 128.75 137.8 127.05 137.8 126.15 L138.1 125.55 138.8 124.55 Q138.8 123.85 137.8 123.5 L134.45 123.2 Q130 123.2 130 124.65 130 125.2 130.95 126.05 131.95 126.9 131.95 127.6 L131.6 129.15 Q131.15 130.7 130.5 130.7 130.1 130.7 129.3 128.55 128.55 126.6 128.55 126.15 L128.75 125.6 129.1 124.65 Q129.1 123.8 128.25 123.5 L125.05 123.2 M58.85 159.05 Q53.65 164.05 53.65 171.25 53.65 178.65 58.75 183.7 63.85 188.75 71.25 188.75 79.3 188.75 84.8 183.95 90.3 179.15 90.3 172.1 90.3 164.65 85.4 159.55 80.1 154.05 71.5 154.05 64.05 154.05 58.85 159.05 M69.75 161 Q73.55 161 76 167.1 77.95 171.95 77.95 176.5 77.95 178.85 76.8 180.25 75.65 181.6 73.75 181.6 70.35 181.6 67.8 175.45 65.7 170.4 65.7 166.35 65.7 164 66.85 162.5 68 161 69.75 161 M25.65 154.5 L24.4 154.2 Q21.85 154.2 19.85 157.7 18.1 160.75 18.1 163.25 18.1 164.7 18.8 165.85 19.45 167 20.65 167 22.7 167 24.8 164.3 26.9 161.6 27.55 161.6 28.6 161.6 29 162.95 29.4 164.35 29.4 166.75 L29.3 169.4 29.2 172.6 29 176.6 28.3 180.95 Q28.1 181.7 26.3 182.65 24.5 183.6 24.5 184.55 24.5 186.9 28.1 187.75 L34.9 188.3 Q40.5 188.3 42.7 187.3 44.95 186.35 44.95 184.7 44.95 183.35 43.15 182.65 41.4 182 41.2 181.25 40.55 178.55 40.4 177.05 L40.2 173 Q40.2 169 40.5 165.25 40.8 161.5 41.4 161.5 43.35 161.5 44.6 164.15 45.85 166.8 48.4 166.8 49.9 166.8 50.95 165.65 52 164.5 52 162.9 52 160.4 50.6 157.45 48.95 154.05 46.6 154.05 L46.3 154.05 45.35 154.35 44.15 154.7 26.95 154.8 25.65 154.5 M29.4 123.45 L28.55 123.45 Q26.1 123.45 25.05 123.95 24.2 124.35 24.2 125.1 24.2 125.45 24.65 125.8 25.65 126.55 25.75 127.3 L25.85 129.35 25.85 129.75 25.85 130.15 25.75 132.8 25.7 135.35 Q25.7 136.4 24.5 137.05 23.95 137.35 23.95 137.75 23.95 138.9 25.25 139.25 L27.9 139.5 28.65 139.5 31.45 139.3 Q32.9 139 32.9 138.2 32.9 137.65 32.2 136.95 L31.4 135.8 31.35 134.15 31.25 132.35 31.4 129.05 31.5 127.1 Q31.5 126.8 32.45 125.9 32.9 125.5 32.9 124.95 32.9 123.95 31.8 123.65 L29.4 123.45 M43.05 123.3 L41.3 123.1 Q38.5 123.1 36.6 124.65 34.7 126.25 34.7 128.6 34.7 130.8 36.75 132.3 37.7 133 40.5 134.2 42.55 135.1 42.55 135.75 42.55 136.25 42 136.55 L40.6 136.85 Q38.35 136.85 37.05 135.05 35.7 133.25 35.25 133.25 34.25 133.25 34.25 134.55 34.25 137.15 35.6 138.3 37.2 139.75 41.45 139.75 44.7 139.75 46.75 138.2 48.8 136.6 48.8 134.05 48.8 131.65 46.75 130.35 45.95 129.85 42.95 128.8 40.9 128.1 40.9 127.2 40.9 126.65 41.3 126.35 41.7 126.05 42.35 126.05 43.55 126.05 45.05 127.35 46.55 128.7 47.2 128.7 47.75 128.7 48.15 128.2 48.55 127.75 48.55 127.1 48.55 126.1 47.75 124.85 46.95 123.45 46 123.45 L45.4 123.6 44.9 123.75 43.05 123.3 M80 123.35 L77.15 123.6 Q75.65 123.95 75.65 125 75.65 125.55 76.15 125.75 L77.1 126.45 77.35 127.6 77.4 130.25 77.25 134.5 76.8 136.8 76 137.15 Q75.5 137.3 75.5 137.9 75.5 138.95 76.95 139.35 L79.6 139.6 82.45 139.3 Q84.05 138.9 84.05 138.05 L84.05 137.95 Q84.05 137.5 83.6 137.15 82.5 136.35 82.5 134.5 82.5 133.45 82.8 133.05 83.25 132.5 84.7 132.5 L86.4 132.7 Q86.75 132.9 86.75 133.45 L86.7 133.9 86.7 134.35 Q86.7 136.55 85.65 137.2 85.2 137.5 85.2 138.2 85.2 138.95 86.6 139.4 L89.1 139.7 91.4 139.6 Q93.75 139.3 93.75 138.05 93.75 137.5 93.25 137.3 92.25 136.85 92.25 132.5 92.25 126.5 93.45 125.75 94 125.4 94 124.85 94 124 92.65 123.6 L90.15 123.25 87.8 123.4 Q85.3 123.75 85.3 124.9 85.3 125.3 86.05 125.9 86.8 126.5 86.8 128.1 L86.65 129.45 Q86.5 129.75 85.8 129.75 L85.35 129.7 84.9 129.7 84.4 129.75 83.95 129.75 Q83.2 129.75 82.95 129.45 82.6 129.1 82.6 128.05 82.6 126.45 83.8 125.75 84.2 125.45 84.2 124.95 L84.2 124.85 Q84.1 123.85 82.65 123.5 L80 123.35 M62.25 123.35 L61.65 123.15 Q60.45 123.15 59.5 124.85 58.65 126.3 58.65 127.5 58.65 128.2 59 128.75 59.3 129.35 59.85 129.35 60.85 129.35 61.85 128 62.85 126.75 63.2 126.75 63.7 126.75 63.9 127.4 L64.05 129.2 64 130.45 64 132 63.9 133.95 63.55 136 62.6 136.85 Q61.75 137.3 61.75 137.75 61.75 138.9 63.45 139.3 L66.7 139.55 70.45 139.05 Q71.5 138.6 71.5 137.8 71.5 137.2 70.7 136.85 69.85 136.5 69.75 136.15 L69.35 134.15 69.25 132.2 Q69.25 130.3 69.4 128.5 69.55 126.7 69.85 126.7 70.75 126.7 71.35 127.95 71.95 129.25 73.2 129.25 73.9 129.25 74.4 128.65 74.9 128.1 74.9 127.35 74.9 126.15 74.25 124.75 73.45 123.1 72.35 123.1 L72.2 123.1 71.75 123.25 71.15 123.4 62.9 123.45 62.25 123.35 M24.6 90.45 Q21.7 90.45 21.7 94.35 21.7 102.15 25.7 105.65 30.55 110.05 43.2 110.05 53 110.05 59.2 105.3 65.35 100.55 65.35 92.95 65.35 85.7 59.2 81.75 56.8 80.25 47.7 77.15 41.55 75.05 41.55 72.35 41.55 70.65 42.8 69.75 44 68.85 46 68.85 49.6 68.85 54.05 72.8 58.5 76.8 60.5 76.8 62.2 76.8 63.35 75.4 64.5 74.05 64.5 72.05 64.5 69 62.2 65.25 59.7 61.15 56.95 61.15 56.25 61.15 55.15 61.6 L53.55 62.05 48 60.6 42.8 60 Q34.4 60 28.7 64.75 23 69.5 23 76.5 23 83.15 29.1 87.7 32 89.75 40.45 93.4 46.5 96 46.5 98 46.5 99.45 44.9 100.35 43.25 101.3 40.75 101.3 33.95 101.3 30 95.85 26.05 90.45 24.6 90.45 M24.1 34.7 Q24.1 33.75 24.95 33.75 26.55 33.75 26.55 36.05 26.55 38.25 24.6 38.25 24.2 38.25 24.1 38.1 23.95 37.9 23.95 37.5 L24.1 34.7 M19.6 31.3 Q16.95 31.3 16.95 32.7 16.95 33.2 17.5 33.45 18.7 33.95 18.7 37 L18.65 41.9 Q18.65 44.55 17.5 45.25 16.95 45.6 16.95 46.05 16.95 47.7 21.3 47.7 L24.6 47.35 Q25.6 47.05 25.6 46.25 25.6 45.7 25.1 45.4 24.1 44.8 24.1 42.25 L24.1 41.95 24.2 41.15 Q24.3 40.75 24.8 40.75 26.05 40.75 26.6 42.6 27.5 45.7 27.75 46.05 28.85 47.9 31.5 47.9 L34.15 47.45 Q35.15 46.95 35.15 46.15 35.15 45.6 34.35 45.3 33.5 45 33.4 43.9 33.1 41.6 32.1 40.55 31.2 39.55 30.2 39.2 L31.75 37.75 Q32.5 36.85 32.5 35.45 32.5 33.55 30.95 32.4 29.4 31.2 26.85 31.2 L24.05 31.4 22.35 31.45 21 31.35 19.6 31.3 M76.35 33.8 Q77.4 33.8 78 34.5 78.6 35.2 78.6 36.45 78.6 37.7 78.05 38.35 77.5 39 76.5 39 L75.7 38.8 75.45 38.25 75.45 34.25 Q75.45 33.8 76.35 33.8 M42.9 33.9 L44.45 33.65 Q47.5 33.65 48.45 35.2 48.85 35.85 49.45 35.85 50.7 35.85 50.7 34.2 50.7 32.95 50.1 31.95 49.55 30.95 48.85 30.95 L47.1 31.3 44.15 31.4 38.1 31.4 36 31.65 Q35.5 31.9 35.5 32.6 35.5 33.15 36.2 33.45 L37.05 34 Q37.6 35.2 37.6 39.75 L37.5 42.45 37.25 44.4 Q37.05 45.2 36.35 45.6 35.65 45.95 35.65 46.45 35.65 47.45 36.9 47.45 L46.8 47.45 48.55 47.65 49.5 47.7 Q50.25 47.7 51 45.9 L51.65 43.45 51.35 42.3 Q51 41.9 50.5 41.9 50.15 41.9 49.1 43.5 47.95 45.1 44.95 45.1 43.35 45.1 43 44.65 42.7 44.15 42.7 41.95 42.7 41 42.85 40.65 43.05 40.35 43.6 40.35 44.8 40.35 45.1 41.55 45.35 42.75 45.9 42.75 46.6 42.75 47.05 41.75 47.45 40.7 47.45 39.05 47.45 37.4 47.1 36.5 46.7 35.6 46.05 35.6 45.25 35.6 45.05 36.85 44.8 38.1 43.95 38.1 L42.75 37.95 Q42.5 37.8 42.5 37.05 L42.5 35.05 Q42.5 34.2 42.9 33.9 M55.05 32.65 Q53.15 34.25 53.15 36.6 53.15 38.8 55.2 40.3 56.15 41 58.95 42.2 61 43.1 61 43.75 61 44.25 60.45 44.55 L59.05 44.85 Q56.8 44.85 55.5 43.05 54.15 41.25 53.7 41.25 52.7 41.25 52.7 42.55 52.7 45.15 54.05 46.3 55.65 47.75 59.9 47.75 63.15 47.75 65.2 46.2 67.25 44.6 67.25 42.05 67.25 39.65 65.2 38.35 64.4 37.85 61.4 36.8 59.35 36.1 59.35 35.2 59.35 34.65 59.75 34.35 60.15 34.05 60.8 34.05 62 34.05 63.5 35.35 65 36.7 65.65 36.7 66.2 36.7 66.6 36.2 67 35.75 67 35.1 67 34.1 66.2 32.85 65.4 31.45 64.45 31.45 L63.85 31.6 63.35 31.75 61.5 31.3 59.75 31.1 Q56.95 31.1 55.05 32.65 M117.5 61.3 L111.75 61 Q107 61 104.5 61.75 100.8 62.8 100.8 65.6 100.8 66.9 102.85 68.15 104.25 68.9 104.25 69.75 L104.1 70.2 98.1 84.15 97.2 84.4 Q96.25 84.4 96.05 83.9 L90.55 70.55 90.5 70.2 Q90.5 69.45 91.95 68.65 93.6 67.7 93.6 65.9 93.6 62.45 89.2 61.65 L80.95 61 79.7 60.85 78.4 60.85 Q73.8 60.85 70.4 62.3 66.95 63.75 66.95 66.5 66.95 68.15 69.35 69.1 71.6 70.1 72.05 70.95 L76.25 80.65 83.75 98.3 Q87.8 107.75 88.35 107.75 88.85 108.9 90.2 109.55 91.5 110.25 92.95 110.25 96.4 110.25 97.5 107.85 98.4 107.85 104.85 94 110.9 80.85 115.05 70.55 115.75 68.9 118.05 68.35 120.4 67.8 120.4 65.45 120.4 61.95 117.5 61.3 M115.25 32.9 Q115.25 33.5 115.95 33.9 116.65 34.3 116.75 34.65 L116.9 35.5 116.95 36.45 Q116.95 37.9 116.25 37.9 115.9 37.9 115 37.2 114.45 36.75 112.85 35.3 L110.1 32.7 Q109.3 31.95 108.75 31.75 L107.5 31.5 107.2 31.5 106.55 31.5 104.15 31.8 Q102.9 32.2 102.9 33.1 102.9 33.5 103.5 33.85 L104.4 34.5 104.95 36.85 105.15 39.3 105 42 104.6 44.7 103.75 45.45 103.35 46.15 Q103.35 46.9 104.45 47.3 L106.6 47.65 Q108.3 47.65 109.2 47.15 109.9 46.8 110.05 46.05 110.05 45.65 109.65 45.3 L108.85 44.7 108.45 43.4 108.25 41.8 108.45 40.55 Q108.6 40.1 108.9 40.1 109.6 40.1 111.8 42.05 L115.65 45.7 Q117.8 47.65 118.5 47.65 119.25 47.65 119.6 46.5 119.9 45.4 119.9 41.25 L120 37.35 Q120.1 35.8 120.35 34.7 120.45 34.35 120.95 34.1 121.95 33.55 121.95 32.8 121.95 32 120.95 31.65 L119.3 31.45 118.9 31.45 118.75 31.45 118.7 31.45 118.4 31.45 116.45 31.7 Q115.25 32.05 115.25 32.9 M90.55 37 Q90.55 35.9 91.1 35.15 91.65 34.45 92.5 34.45 94.3 34.45 95.45 37.35 96.4 39.7 96.4 41.85 96.4 43 95.85 43.7 95.3 44.3 94.4 44.3 92.75 44.3 91.55 41.35 90.55 38.95 90.55 37 M83.9 36.35 Q83.9 34.1 82.2 32.65 80.5 31.25 77.75 31.25 L73.65 31.5 71.2 31.6 70.55 31.55 69.95 31.55 68.55 31.8 Q68.05 32 68.05 32.65 68.05 33.4 68.75 33.6 70.2 34 70.2 35.75 L70.2 43.2 Q70.2 44.95 69.05 45.5 68.5 45.75 68.5 46.2 68.5 47.7 72.7 47.7 77.15 47.7 77.15 46.15 77.15 45.8 76.35 45.25 75.45 44.65 75.45 43.85 L75.4 41.85 Q75.4 41.45 76.15 41.45 L76.85 41.5 77.8 41.6 Q80.5 41.6 82.2 40.15 83.9 38.65 83.9 36.35 M100 33.75 Q97.45 31.1 93.3 31.1 89.75 31.1 87.25 33.5 84.75 35.9 84.75 39.35 84.75 42.9 87.2 45.35 89.65 47.75 93.2 47.75 97.05 47.75 99.7 45.45 102.35 43.15 102.35 39.75 102.35 36.2 100 33.75 M139.25 33.8 Q140.25 34.55 140.35 35.3 L140.45 37.35 140.45 37.75 140.45 38.15 140.35 40.8 140.3 43.35 Q140.3 44.4 139.1 45.05 138.55 45.35 138.55 45.75 138.55 46.9 139.85 47.25 L142.5 47.5 143.25 47.5 146.05 47.3 Q147.5 47 147.5 46.2 147.5 45.65 146.8 44.95 146.1 44.3 146 43.8 L145.95 42.15 145.85 40.35 146 37.05 146.1 35.1 Q146.1 34.8 147.05 33.9 L147.5 32.95 Q147.5 31.95 146.4 31.65 L144 31.45 143.15 31.45 Q140.7 31.45 139.65 31.95 138.8 32.35 138.8 33.1 138.8 33.45 139.25 33.8 M136.45 32.85 Q135.65 31.45 134.7 31.45 L134.1 31.6 133.6 31.75 131.75 31.3 130 31.1 Q127.2 31.1 125.3 32.65 123.4 34.25 123.4 36.6 123.4 38.8 125.45 40.3 126.4 41 129.2 42.2 131.25 43.1 131.25 43.75 131.25 44.25 130.7 44.55 L129.3 44.85 Q127.05 44.85 125.75 43.05 124.4 41.25 123.95 41.25 122.95 41.25 122.95 42.55 122.95 45.15 124.3 46.3 125.9 47.75 130.15 47.75 133.4 47.75 135.45 46.2 137.5 44.6 137.5 42.05 137.5 39.65 135.45 38.35 134.65 37.85 131.65 36.8 129.6 36.1 129.6 35.2 129.6 34.65 130 34.35 130.4 34.05 131.05 34.05 132.25 34.05 133.75 35.35 135.25 36.7 135.9 36.7 136.45 36.7 136.85 36.2 137.25 35.75 137.25 35.1 137.25 34.1 136.45 32.85 M177.65 155.8 Q176.45 153.75 175 153.75 L171.4 154.4 165.2 154.7 152.6 154.7 148.3 155.15 Q147.25 155.65 147.25 157.15 147.25 158.35 148.65 158.9 150.05 159.45 150.4 160.1 151.6 162.6 151.6 172.1 L151.4 177.7 150.85 181.7 Q150.45 183.45 149 184.2 147.5 184.95 147.5 186 147.5 188.1 150.1 188.1 L170.8 188.1 174.4 188.45 176.35 188.6 Q178 188.6 179.55 184.85 180.85 181.7 180.85 179.75 180.85 178.3 180.2 177.4 179.55 176.5 178.5 176.5 177.75 176.5 175.5 179.85 173.2 183.25 166.9 183.25 163.55 183.25 162.85 182.25 162.2 181.25 162.2 176.6 162.2 174.65 162.55 173.95 162.95 173.3 164.05 173.3 166.65 173.3 167.2 175.8 167.75 178.3 168.9 178.3 170.35 178.3 171.25 176.2 172.15 174.1 172.15 170.65 172.15 167.2 171.35 165.3 170.55 163.4 169.15 163.4 167.55 163.4 167.1 166 166.65 168.65 164.85 168.65 L162.3 168.3 Q161.8 168 161.8 166.45 L161.85 162.3 Q161.85 160.5 162.65 159.9 163.4 159.35 165.85 159.35 172.2 159.35 174.15 162.55 175 163.95 176.25 163.95 178.85 163.95 178.85 160.5 178.85 157.9 177.65 155.8 M173.1 123.45 L172.65 123.45 170.65 123.7 Q169.45 124.1 169.45 124.95 169.45 125.65 169.8 125.9 L170.15 126.3 169.65 127.4 168.95 128 168.9 128 Q168.55 128 168.1 127.4 167.6 126.8 167.6 126.25 L167.95 125.95 168.25 125.4 168.2 125.1 Q168.1 124.4 167.35 124 166.6 123.65 165.75 123.65 L161.8 123.65 160.55 123.85 Q159.3 124.2 159.3 125.05 159.3 125.45 159.65 125.75 160 126.15 160.8 126.45 L162.35 128.05 164.45 131 164.7 131.75 164.75 133.05 164.7 134.75 164.6 136.1 164.1 136.85 Q163.05 137.55 163.05 137.95 163.05 139.15 164.65 139.4 L167.7 139.55 168.35 139.55 169 139.55 170.8 139.35 Q171.65 139 171.95 138.15 L172 137.85 Q172 137.4 171.5 137.05 170.4 136.3 170.4 135.65 L170.4 130.95 174 126.35 175.2 125.9 Q176.05 125.65 176.05 124.8 176.05 123.95 175.65 123.7 175.25 123.4 174.55 123.4 L173.9 123.45 173.25 123.45 173.1 123.45 M165.9 61 L164.2 61.35 161.45 62.1 154.65 60.35 Q151.4 59.55 149.2 59.55 139 59.55 130.85 67.65 122.7 75.7 122.7 85.05 122.7 96.6 130.45 103.5 138.15 110.4 150.5 110.4 164.5 110.4 170.3 101 L173.55 94.1 177.15 92.7 Q178.6 91.85 178.6 90.2 178.6 87 173.95 85.5 170.4 84.35 164.8 84.35 158.15 84.35 154.7 85.35 149.8 86.8 149.8 90.5 149.8 93.3 153.6 93.75 157.45 94.2 157.45 96.25 157.45 98.05 156.35 99.3 155.2 100.6 153.25 100.6 148.8 100.6 144.9 94.55 141.05 88.55 141.05 82.45 141.05 77.3 143.15 73.7 145.8 69.35 150.8 69.35 154.85 69.35 159.1 74.05 163.35 78.75 166.95 78.75 169.15 78.75 170.65 77 172.1 75.3 172.1 72.95 172.1 69.65 170.55 65.75 168.6 61 165.9 61 M165.3 31.5 L163.4 31.4 160.95 31.65 Q159.75 32 159.75 32.95 159.75 33.4 160.4 33.8 L160.9 34.35 160.85 34.5 158.85 39.15 158.55 39.2 158.15 39.05 156.3 34.6 156.3 34.5 Q156.3 34.25 156.8 33.95 157.35 33.65 157.35 33.05 157.35 31.9 155.85 31.65 L153.1 31.4 152.7 31.35 152.25 31.35 Q150.75 31.35 149.6 31.85 148.45 32.35 148.45 33.25 148.45 33.8 149.25 34.1 150 34.45 150.15 34.75 L151.55 37.95 154.05 43.85 155.6 47 Q155.75 47.4 156.2 47.6 L157.1 47.85 Q158.25 47.85 158.65 47.05 158.95 47.05 161.1 42.4 L164.5 34.6 Q164.7 34.05 165.5 33.85 166.25 33.7 166.25 32.9 166.25 31.75 165.3 31.5 M174.1 33.9 L175.65 33.65 Q178.7 33.65 179.65 35.2 L180.65 35.85 Q181.9 35.85 181.9 34.2 181.9 32.95 181.3 31.95 180.75 30.95 180.05 30.95 L178.3 31.3 175.35 31.4 169.3 31.4 167.2 31.65 Q166.7 31.9 166.7 32.6 166.7 33.15 167.4 33.45 168.05 33.7 168.25 34 168.8 35.2 168.8 39.75 L168.7 42.45 168.45 44.4 Q168.25 45.2 167.55 45.6 166.85 45.95 166.85 46.45 166.85 47.45 168.1 47.45 L178 47.45 179.75 47.65 180.7 47.7 Q181.45 47.7 182.2 45.9 182.85 44.4 182.85 43.45 182.85 42.75 182.55 42.3 182.2 41.9 181.7 41.9 181.35 41.9 180.3 43.5 179.15 45.1 176.15 45.1 174.55 45.1 174.2 44.65 173.9 44.15 173.9 41.95 173.9 41 174.05 40.65 174.25 40.35 174.8 40.35 176 40.35 176.3 41.55 176.55 42.75 177.1 42.75 177.8 42.75 178.25 41.75 178.65 40.7 178.65 39.05 178.65 37.4 178.3 36.5 177.9 35.6 177.25 35.6 176.45 35.6 176.25 36.85 176 38.1 175.15 38.1 L173.95 37.95 Q173.7 37.8 173.7 37.05 L173.7 35.05 Q173.7 34.2 174.1 33.9 M200 0 L200 300 0 300 0 0 200 0"/>
  </g>
</svg>
  </div>
</div>

推荐答案

如果您想在HTML中使用自适应内联SVG,则SVG不应具有width和height属性.

If you want to use a responsive inline SVG in your HTML, the SVG shouldn't have width and height attributes.

更新:

也许这是Blink(或Webkit)上的错误.而且我尝试使用重绘hack.

Maybe It's a bug on Blink (or Webkit). And I tried to use a redraw hack.

https://jsfiddle.net/pbg1g4uv/2/

#logowrapper svg {
  position:               relative;
    width:                                  auto;
    height:                                 100%;
    z-index:                                4;
  animation: redraw 1s infinite;
}

@keyframes redraw {
  from { min-width: 1px; }
  to   { min-width: 2px; }
}

这篇关于Chrome:SVG容器无法响应缩放的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆