在开发工具中更改后,SVG组上的原点转换不起作用

时间:2017-07-20 17:23:43

标签: css svg

嘿伙计我有一个非常奇怪的问题。我只是在svg组上添加转换(旋转)和转换原始css规则。

以下是codepen:https://codepen.io/HauntedSmores/pen/aweLNE

#ria {
  position: absolute;
  left: 200px;
  overflow: visible;
}

#ria_right_arm_hand {
  transform-origin: 50% 15%;
  transform: rotate(10deg);
}
<svg id="ria" xmlns="http://www.w3.org/2000/svg" width="156" height="500" viewBox="0 0 156 500">
      <title>
        Ria
      </title>
        <path id="ria_right_foot_2" fill="#CC9D69" d="M50.18 449c-.1 19.56-16.03 28.26-21.9 31.88 7.24 1.47 38.12-1.46 39.98-3.62-.3-6.16-3.9-18.08-3.42-28.25.2-6-14.66-2.1-14.66 0z"/>
        <path id="ria_right_foot_1" fill="#BC2F2F" d="M32.1 477.75c-.4.6 4.2-4.9 5.67-6.35 2.15 0 10.16 1.46 13.78 2.93-3.62 4.4-5.38 5.97-1.47 5.1 11.24-2.17 15.64-2.65 18.08-3.63 2.74 3.22 3.7 13.1 2.25 15.93-3.6 2.16-10.3 1.76-12.1 1.57-.6-.7-.5-1.86-2.2-1.37-1.1.3-1.2 1.08-1.9 1.66-3 .9-38.2-.4-41.1-1.1-5-1.2-3.9-6.7 0-8 7.64-2.8 17.2-5.9 19.17-6.8z"/>
        <path id="ria_right_leg_bottom" fill="#2B5189" d="M76.47 465.04h-43.4V366.3c0-11.74 9.5-21.22 21.2-21.22h.7c11.82 0 21.5 9.58 21.5 21.5v98.46z"/>
        <path id="ria_right_leg_top" fill="#2B5189" d="M54.77 388.5c-12.02 0-21.7-9.7-21.7-21.72v-76.55c0-12.03 9.68-21.7 21.7-21.7s21.7 9.67 21.7 21.7v76.55c0 11.93-9.68 21.7-21.7 21.7z"/>
        <path id="ria_left_foot_2" fill="#D8A96F" d="M101.98 449c-.1 19.56-16.03 28.26-21.9 31.88 7.24 1.47 38.12-1.46 39.98-3.62-.3-6.16-3.9-18.08-3.43-28.25.2-6-14.65-2.1-14.65 0z"/>
        <path id="ria_left_foot_1" fill="#C92F2F" d="M83.9 477.75c-.4.6 4.2-4.9 5.66-6.35 2.15 0 10.17 1.46 13.78 2.93-3.6 4.4-5.37 5.97-1.46 5.1 11.24-2.17 15.63-2.65 18.08-3.63 2.73 3.22 3.7 13.1 2.25 15.93-3.6 2.16-10.3 1.76-12.1 1.57-.6-.7-.5-1.86-2.2-1.37-1.1.3-1.2 1.08-1.9 1.66-3 .9-38.2-.4-41.1-1.1-5-1.2-3.9-6.7 0-8 7.6-2.8 17.2-5.9 19.17-6.8z"/>
        <path id="ria_left_leg_bottom" fill="#2F539B" d="M128.26 465.04h-43.4V366.3c0-11.74 9.5-21.22 21.22-21.22h.68c11.83 0 21.5 9.58 21.5 21.5v98.46z"/>
        
        <path id="ria_left_leg_top" fill="#2F539B" d="M106.57 388.5c-12.02 0-21.7-9.7-21.7-21.72v-76.55c0-12.03 9.68-21.7 21.7-21.7s21.7 9.67 21.7 21.7v76.55c0 11.93-9.68 21.7-21.7 21.7z"/>

        <g id="ria_right_arm">
            <path id="ria_right_arm_top" fill="#DDD" d="M33.95 223.3l-1.16-.18c-9.1-1.27-15.5-9.67-14.2-18.77l8.6-61.38c1.3-9.1 9.6-15.43 18.7-14.15l1.13.16c9.1 1.28 15.4 9.68 14.13 18.78l-8.63 61.38c-1.25 9.1-9.63 15.43-18.73 14.15z"/>
            <g id="ria_right_arm_hand">
                <path id="ria_right_hand" fill="#D8A96F" d="M17.44 267.3c-.53 3-1.5 9.66-8.57 17.88-3.36 3.9-4.44 11.8-8.48 17.9.55 1.68 6.02-.3 7.5-2.8 1.47-2.48 2.62-4.5 3.1-5.12.45-.6 1.32-.4 1.47.27.16.68-3.23 23.92-2.9 25.15.36 1.23 3.4 1.8 4.12.72.72-1.08 3.87-19.38 4.2-19.83.35-.44.98-.1 1.2.22.25.3-3.68 19.74-3.35 20.55.32.8 3.47 1.23 3.92.7.44-.55 4-20 4.4-20.4.43-.37 1.1-.2 1.32.24.2.44-3.87 19.05-3.53 19.94.35.9 3.38 1.44 3.8.67.43-.75 4.38-19.5 4.72-19.73.33-.22.72-.12.96.18.23.3-1.95 14.43-1.6 15.28.35.85 2.6 1.44 3.12.55.5-.88 4.37-24.82 4.24-30.4-.13-5.6-.4-15.87.08-18.58-1.1-.2-17.55-3.02-19.76-3.4z"/>
                <path id="ria_right_arm_bottom" fill="#DDD" d="M40.67 285.74l-31.45-4.42c-.78-.1-1.28-.77-1.17-1.55L18.8 203.2c1.3-9.1 9.68-15.44 18.78-14.16l1.16.17c9.1 1.3 15.42 9.7 14.14 18.8l-10.76 76.6c-.1.7-.77 1.3-1.45 1.2z"/>
            </g>
        </g>

        <path id="ria_coat_left" fill="#F4F4F4" d="M148.8 383.5s.96 8.8-67.45 8.8c-5.57 0-10.55-.1-15.24-.2-.3-10.55-.3-267.7-.1-280.2 4.7-1.38 9.7-2.16 14.9-2.16 27.2 0 49.8 21.12 51.5 48.3l16.4 225.46z"/>
        <path id="ria_coat_right" fill="#EAEAEA" d="M66.78 392.1c-52.86-1.17-52.86-8.6-52.86-8.6l16.33-225.46c1.45-22 16.42-40.1 36.43-46.15-.3 9.5-.3 273.5.1 280.2z"/>
        <path id="ria_shirt" fill="#2F539B" d="M65.72 148.85l-6.84-33.24H83.3z"/>
        <path id="ria_neck" fill="#CC9D69" d="M59.85 95.07c2.94 9.78 2.15 16.82-2.93 21.5 6.06 6.08 24.43 5.88 33.23 1-2.93-4.9-6.84-10.76-1.95-22.5-.98-14.66-30.3-12.7-28.35 0z"/>
        <path id="ria_collar_2" fill="#FFF" d="M86.24 107.8l-20.52 41.05 28.34-10.76L96 110.7c-2.92-.98-6.83-1.96-9.76-2.93z"/>
        <path id="ria_collar_1" fill="#F4F4F4" d="M59.85 112.67L66 148.85l-16.9-8.8 2.94-22.5c2.54-1.55 6.06-3.6 7.8-4.88z"/>
        <path id="ria_coat_pocket" fill="#F4F4F4" d="M35.42 171.34l22.48 4.9v6.83l-22.48-4.9z"/>
        <path id="ria_left_hand_4" fill="#BC8E64" d="M135.5 291.8c1.17 4.78.48 10.06-.1 13-.7 2.93-3.62 5.47-5.47 6.55-1.86 1.07 1.75-16.82 1.75-16.82l3.82-2.74z"/>
        <path id="ria_left_hand_3" fill="#C69666" d="M133.25 296.68c0 1.96-1.47 10.85-2.54 13.2-.9 2.25-3.6 6.16-7.3 5.77-3.7-.4 5.2-19.07 5.2-19.07l4.7.1z"/>
        <path id="ria_left_hand_2" fill="#CC9D69" d="M118.7 318.97c1.84-.3 5.17-2.54 6.44-5.86 1.37-3.3 3.32-14.5 3.32-16.8s-4.98-3.3-6.25-1.3c-1.3 2-3.5 24.1-3.5 24.1z"/>
        <path id="ria_left_hand_1" fill="#D8A96F" d="M113.6 267.54c0 5.58-.3 10.86-5.27 16.53-5 5.57-4.6 18.18-6.65 23.46-1.95 5.28 5.96.98 6.94-2.64.98-3.7 2.64-9.9 5-9.6 2.33.3 1.94 8.9 1.94 13.5 0 2.6-.68 6.7-.68 9.3 0 1.9.3 3.6 1.66 3.6 4.3-3.6 6.64-16.5 6.25-22.1 1.6 0 10.8-1.7 13.1-4.3-.3-7.6-4.8-15.2-4.3-27.8.4-7.6-18.1-2.7-18.1 0z"/>
        <path id="ria_left_arm_bottom" fill="#FFF" d="M135.4 284.46h-31.76c-.8 0-1.37-.6-1.37-1.37v-77.4c0-9.2 7.43-16.7 16.6-16.7h1.2c9.17 0 16.6 7.4 16.6 16.6V283c0 .68-.6 1.37-1.27 1.37z"/>
        <path id="ria_left_arm_top" fill="#FFF" d="M120.06 223.55h-1.18c-9.18 0-16.6-7.43-16.6-16.62v-62c0-9.18 7.42-16.6 16.6-16.6h1.18c9.18 0 16.6 7.42 16.6 16.6v62c0 9.2-7.42 16.62-16.6 16.62z"/>
        <path id="ria_face" fill="#D8A96F" d="M104.7 64.57c0 22.4-16.2 41.75-34.1 41.75-22.57 0-30.88-22.78-30.88-41.75 0-29.92 12.4-40.38 32.45-40.38 17.98-.1 32.53 17.8 32.53 40.3z"/>
        <path id="ria_hair" fill="#CCC" d="M46.27 21.94c6.06-5.86 19.15-19.46 45.05-13.3 22.2 5.28 20.14 23.37 24.92 28.46 7.82 8.2 13.4 4.98 17.7 14.47 3.32 7.33-2.26 13-.2 20.53 1.37 4.98 14.27 23.76-11.93 27.28-27.5 3.7-19.7-20.34-20.1-28.26-.3-6.35-9.5-2.54-17.6-12.7C76.9 49.3 81.2 32 78.4 28c-4-5.57-18.96-3.13-25.5 1.27-13.1 8.6-18.58 40.87-5.88 63.85-9.2 13.2-40.86 4.7-23.75-20.63 5.3-7.9-5.36-12.1 1.3-24.9 5.75-11.2 21.8-25.7 21.8-25.7z"/>
        <path id="ria_mouth_bottom" fill="#634235" d="M57.02 92.83c0-1.28.98-2.35 6.06-2.35 3.52 0 9.2 1.76 12.02.98.6-.2.6.3-.2.58-3.6 1.27-7.13 1.27-12.5 1.27-3.52 0-5.38-.4-5.38-.4z"/>
        <path id="ria_mouth_top" fill="#9E6954" d="M58 92.92c1.56.4 10.36.5 13.3-.1 1.55-.3-1.97 2.65-7.83 2.65S58 92.92 58 92.92z"/>
        <path id="ria_nose" fill="#C99B69" d="M65.33 82.36H62.3c-1.27 0-2.25-.97-2.25-2.24l1.17-16.82c0-1.27.98-2.25 2.25-2.25h.78c1.27 0 2.25.98 2.25 2.25l1.17 16.82c-.1 1.17-1.17 2.24-2.34 2.24z"/>
        <path id="ria_glasses_4" fill="#C92F2F" d="M62 64.67c0-8.6-7.03-15.55-15.53-15.55-8.6 0-15.64 6.94-15.64 15.65 0 8.7 6.94 15.64 15.64 15.64 8.6 0 15.53-6.9 15.53-15.5V66h3.62v-1.9H62v.6z"/>
        <ellipse id="ria_glasses_3" cx="81.26" cy="64.77" fill="#C92F2F" rx="15.64" ry="15.64"/>
        <ellipse id="ria_glasses_2" cx="46.47" cy="64.77" fill="#FFF" rx="13.88" ry="13.88"/>
        <ellipse id="ria_glasses_1" cx="81.26" cy="64.77" fill="#FFF" rx="13.88" ry="13.88"/>
        <path id="ria_right_brow" fill="#9E6954" d="M54.28 47.17c-1.95-.1-12.02-.4-15.93.1-1.85.2 2.35-2.94 9.4-2.94 7.02 0 6.53 2.84 6.53 2.84z"/>
        <path id="ria_left_brow" fill="#9E6954" d="M73.15 47.26c1.95-.1 12.3-.48 16.32.1 1.85.3-2.45-3.03-9.58-3.03-7.3 0-6.8 2.93-6.8 2.93z"/>
    </svg>

最奇怪的部分是,如果在初始加载笔之后,如果你混淆了变换或原点值,它就会起作用。

同样的事情发生在codepen之外。当我在生产中加载时,变换原点被打破但是当你弄乱检查器中的值时,它会跳转到位

0 个答案:

没有答案