更新后的SVG渲染错误

时间:2014-08-04 10:27:55

标签: google-chrome svg path render

我用iPad收集数字签名,SVG路径。 使用浏览器(Chrome)查看签名,这些浏览器已经使用了很多年。 突然间它并不完美,在签名的右下方添加了空格,它弄乱了我的桌子。我追溯到Chrome的更新。如果我降级Chrome,它就像一个魅力。 令人困惑的是IE和Firefox中出现相同的渲染错误!新标准?任何人都知道如何解决这个问题?

代码:

<svg xmlns=http://www.w3.org/2000/svg version=1.1><g transform=scale(0.14,0.14)>               <g fill=none><path stroke=black stroke-width=8 d='M100,24 L98,24 L94,22 L86,22 L74,23 L63,27 L54,33 L49,38 L46,47 L46,58 L53,70 L60,78 L67,87 L72,97 L76,106 L79,117 L80,126 L80,136 L79,145 L72,151 L63,155 L51,157 L42,157 L32,153 L23,145 L17,139 L15,135 L14,132 L14,126 L23,121 L36,119 M138,87 L134,92 L134,99 L134,111 L132,123 L131,132 L131,138 L131,142 L131,143 M148,33 L145,35 L145,37 L145,39 L145,41 L146,42 L147,43 L148,43 L148,41 L148,36 L148,34 L147,33 L145,33 L144,33 L144,40 M241,89 L236,87 L231,87 L221,88 L209,94 L200,98 L195,101 L192,107 L192,110 L192,117 L195,121 L202,126 L212,126 L216,126 L224,123 L230,108 L237,91 L244,76 L247,67 L247,64 L247,63 L247,64 L246,70 L246,77 L245,85 L243,97 L240,112 L236,121 L231,131 L226,139 L221,146 L213,152 L205,157 L193,161 L180,164 L166,165 L154,165 L146,160 L144,151 L145,135 L155,123 L167,114 M285,68 L282,76 L280,87 L277,103 L275,116 L274,125 L273,128 L273,131 L279,120 L285,101 L295,77 L303,67 L306,63 L307,63 L309,63 L311,71 L314,82 L319,100 L322,112 L324,124 L326,132 L326,138 L326,141 L326,144 L325,144 L324,140 M393,91 L388,90 L382,90 L376,90 L366,90 L357,93 L350,101 L344,111 L343,120 L345,129 L353,132 L368,132 L379,124 L386,110 L394,89 L397,77 L397,75 L397,77 L396,97 L396,116 L396,130 L396,143 L399,152 L401,157 L403,160 L406,160 L411,149 M439,32 L438,34 L438,43 L440,56 L440,70 L441,84 L441,98 L441,111 L441,124 L440,133 L440,140 L440,145 L438,149 L435,150 M414,64 L416,65 L424,67 L433,67 L443,69 L450,71 L455,73 L460,74 L464,77 L467,78 L470,80 M489,83 L490,89 L490,104 L489,121 L488,134 L488,145 L492,150 L498,154 L504,154 L512,149 L517,137 L519,123 L520,115 L520,109 L520,106 L520,101 L519,101 L518,101 M549,85 L548,87 L547,92 L545,103 L543,115 L542,123 L542,129 L541,132 L541,135 L540,126 L539,111 L539,97 L543,85 L547,79 L550,77 L552,76 L556,76 L562,79 L568,83 L574,89 L577,91 M573,103 L574,105 L579,106 L586,108 L593,109 L596,110 L598,110 L598,109 L597,104 L594,99 L591,94 L588,92 L586,90 L585,90 L584,90 L583,91 L581,102 L577,118 L576,131 L577,145 L582,155 L591,160 L601,163 L610,164 L620,161 '></g></svg> 

1 个答案:

答案 0 :(得分:1)

假设这个svg是更大的html页面的一部分,那么你几乎肯定需要<svg>元素的高度和宽度属性。试试height="100%" width="100%"

Firefox已经按照这种方式工作了多年,因为它符合规范的要求。 Chrome最近已更改为与Firefox和SVG规范兼容。