SVG + Firefox中的转换源问题 [英] SVG + transform-origin problems in Firefox
本文介绍了SVG + Firefox中的转换源问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用此链接中的SVG创建天气组件： http://codepen.io/ TechnotronicOz / pen / eokCA
（以下是其中一个图标的示例）
< svg
version =1.1
id =sun
class =climacon climacon_sun
xmlns =http://www.w3.org/2000/svg
xmlns：xlink =http://www.w3.org/1999/xlink
x =0px
y =0px
viewBox =15 15 70 70
enable-background =new 15 15 70 70
xml：space =preserve>
< clipPath id =sunFillClip>
< path
d =M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581 ，7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z
/>
< / clipPath>
< g class =climacon_iconWrap climacon_iconWrap-sun>
< g class =climacon_componentWrap climacon_componentWrap-sun>
< g class =climacon_componentWrap climacon_componentWrap-sunSpoke>
< path
class =climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-east
d =M72.03,51.999h-3.998c-1.105,0-2-0.896 -2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S73.136,51.999,72.03,51.999z
/>
< path
class =climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northEast
d =M64.175,38.688c-0.781,0.781-2.049,0.781-2.828， 0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z
/>
< path
class =climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north
d =M50.034,34.002c-1.105,0-2-0.896-2- 2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z
/>
< path
class =climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northWest
d =M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781 -2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,012.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z
/>
< path
class =climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-west
d =M34.034,50c0,1.104-0.896,1.999-2,1.999h- 4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z
/>
< path
class =climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southWest
d =M35.893,61.312c0.781-0.78,2.048-0.78,2.827， 0c0.781,0.78,0.781,2.047,0,2.8281-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z
/>
< path
class =climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-south
d =M50.034,65.998c1.104,0,2,0.895,2， 1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z
/>
< path
class =climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southEast
d =M64.175,61.312l2.828,2.828c0.779,0.78,0.779 ，2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,01-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z
/>
< / g>
< g class =climacon_componentWrap climacon_componentWrap_sunBodyclip-path =url（#sunFillClip）>
< circle
class =climacon_component climacon_component-stroke climacon_component-stroke_sunBody
cx =50.034
cy =50
r =11.999
/>
< / g>
< / g>
< / g>
< / svg><！ - sun
我只是花了一会儿试图调试firefox，直到我意识到，即使他的例子在该浏览器搞砸了。我不太了解SVG，所以如果有人有一些提示，将是巨大的。我开始倾向于选择一组不同的天气图标。感谢您的帮助
解决方案
形状期望transform-box属性是填充框，即
transform-box：fill-box
Firefox仅支持this：如果about：config svg.transform-origin.enabled设置为true（Firefox 41，42）或svg.transform-box.enabled设置为true（Firefox 43以上）。 / p>
Chrome在这里是错误的，因为它假定源是填充框而不是视图框，因为规范状态。这种与规范的不一致是为什么它没有在Firefox中默认启用，因为规范可能会更改以匹配Chrome的实现。
I'm building a weather component using the SVGs from this link: http://codepen.io/TechnotronicOz/pen/eokCA (Here's an example of one of the icons)
<svg
version="1.1"
id="sun"
class="climacon climacon_sun"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="15 15 70 70"
enable-background="new 15 15 70 70"
xml:space="preserve">
<clipPath id="sunFillClip">
<path
d="M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z"
/>
</clipPath>
<g class="climacon_iconWrap climacon_iconWrap-sun">
<g class="climacon_componentWrap climacon_componentWrap-sun">
<g class="climacon_componentWrap climacon_componentWrap-sunSpoke">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-east"
d="M72.03,51.999h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S73.136,51.999,72.03,51.999z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northEast"
d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northWest"
d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-west"
d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southWest"
d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-south"
d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southEast"
d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"
/>
</g>
<g class="climacon_componentWrap climacon_componentWrap_sunBody" clip-path="url(#sunFillClip)">
<circle
class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody"
cx="50.034"
cy="50"
r="11.999"
/>
</g>
</g>
</g>
</svg><!-- sun
Works beautifully in chrome. I just spent a while trying to debug firefox until I realized that even his example is messed up in that browser. I don't know much about SVGs so if anyone has some tips that would be great. I'm starting to lean towards picking a different set of weather icons. Thanks for the help in advance
解决方案
The shapes expect the transform-box property to be fill-box i.e.
transform-box: fill-box
Firefox only supports this if the about:config svg.transform-origin.enabled is set to true (Firefox 41, 42) or svg.transform-box.enabled is set to true (Firefox 43 onwards).
Chrome is wrong here as it is assuming that the origin is the fill-box rather than the view-box as the specification states. This inconsistency with the specification is why it's not enabled in Firefox by default as the specification may change to match Chrome's implementation.
这篇关于SVG + Firefox中的转换源问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
