相关疑难解决方法(0)

我在HTML中使用纯SVG代码设计了一个3栏图标.我正在使用CSS3变换将顶部和底部条形旋转为X形.问题是它们围绕自己的中心旋转,但我需要它们围绕图标的中心旋转.为了解决这个问题,我调整了他们的X/Y坐标.

这会导致Internet Explorer,Firefox和Safari出现很多错误问题.Chrome似乎没问题,但显然我想以"正确"的方式对其进行编码,因此它可以在所有浏览器中运行.

这是我的CodePen

HTML

<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
  <g class="icon">
    <rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/>
    <rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/>
    <rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/>
  </g>
</svg>

CSS

.hamburger { display:block; text-align:center; }
svg { cursor:pointer; }

.frstbar, .scndbar, .thrdbar {
  -webkit-transition: all 0.35s linear;
  -moz-transition: all 0.35s linear;
    -o-transition: all 0.35s linear;
    transition: all 0.35s linear;
}
#burgericon.open .frstbar {
  -webkit-transform: …

我正在尝试使用CSS和SVG创建一个简单的动画:旋转齿轮.动画在Chrome中完美运行,但不适用于Firefox.以下是行动中的代码:http://jsfiddle.net/fL8Qn/

齿轮是SVG文件中的路径:

<div class="svg">
    <svg x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <title>PDP</title>
    <text x="44" y="120" class="gear_text">PDP</text>
    <g transform="translate(50%, 50%)">
        <path id="gear1" class="gear go-clockwise" x="0px" y="0px" d="m91.63252,0l-4.16735,23.73752l0.01604,0.01606c-5.09374,0.83228 -10.02215,2.16622 -14.72963,3.9428l0,-0.01584l-15.46727,-18.48038l-14.53742,8.39871l8.25439,22.63163l0.03211,0.01585c-3.9412,3.23531 -7.55353,6.86028 -10.78684,10.8031l-0.01604,-0.04816l-22.63164,-8.25463l-8.39871,14.53743l18.48035,15.48333c-1.77354,4.70347 -3.09585,9.62447 -3.92695,14.71362l-0.01604,-0.01586l-23.73753,4.16734l0,16.79736l23.73753,4.16735l0.01604,-0.01587c0.83109,5.08915 2.15341,10.01014 3.92695,14.71381l-18.48035,15.48312l8.39871,14.53743l22.63164,-8.25444l0.01604,-0.04832c3.23331,3.94261 6.84564,7.56799 10.78684,10.80287l-0.03211,0.0159l-8.25439,22.63168l14.53742,8.39873l15.46727,-18.48027l0,-0.01582c4.70748,1.77637 9.63589,3.11047 14.72963,3.94278l-0.01604,0.01587l4.16735,23.73772l16.78132,0l4.16733,-23.73772l-0.01603,-0.01587c5.09294,-0.83009 10.02274,-2.15297 14.72985,-3.92696l15.4831,18.48047l14.53743,-8.39871l-8.27046,-22.63173c3.93234,-3.22687 7.54289,-6.83942 10.771,-10.7708l22.64757,8.25439l8.38263,-14.53741l-18.4642,-15.48308c1.77402,-4.70432 3.11153,-9.62388 3.94283,-14.71384l23.73775,-4.15126l0,-16.79738l-23.73775,-4.16735c-0.83148,-5.08432 -2.17067,-9.99828 -3.94283,-14.69775l18.4642,-15.4831l-8.38263,-14.53745l-22.64757,8.25443c-3.2281,-3.93136 -6.83842,-7.54391 -10.771,-10.77079l8.27046,-22.63168l-14.53743,-8.39871l-15.4831,18.48042c-4.70711,-1.77378 -9.63691,-3.09688 -14.72985,-3.92696l0.01603,-0.01586l-4.16733,-23.73761l-16.78132,0l0,-0.00011l0,0zm8.39869,40.8716c32.67677,0 59.17564,26.48283 59.17564,59.1596c0,32.67677 -26.49887,59.15962 -59.17564,59.15962c-32.67677,0 -59.15962,-26.48285 -59.15962,-59.15962c0,-32.67677 26.48286,-59.1596 59.15962,-59.1596z" stroke-dashoffset="0" stroke-miterlimit="4" stroke-linejoin="round" stroke-linecap="round" stroke-width="2"/>
    </g>
</svg>

并使用CSS应用动画:

.svg {
  width:200px;
  height:200px;
  float:left;
  position: fixed;
  top: …

我有一个CSS问题; transform-origin在firefox中不起作用.该网站以chrome和safari为中心,但不在firefox上.

html {
transform: scale(0.9);
transform-origin: center top;
}

我的网站是http://test.lafsdesign.com/

如果你能帮助我解决这个问题,我将不胜感激.非常感谢你提前.

完整的CSS

@media screen and (max-width: 1240px) {
html {
zoom: 0.9;
-moz-transform: scale(0.9);
-moz-transform-origin: center top;
}
}
@media screen and (max-width: 1140px) {
html {
zoom: 0.8;
-moz-transform: scale(0.8);
}    
}
@media screen and (max-width: 1005px) {
html {
zoom: 0.7; 
-moz-transform: scale(0.7);
}
}
@media screen and (max-width: 880px) {
html {
zoom: 0.6; 
-moz-transform: scale(0.6);
}
}

目标:

我发现了一个在线教程,使用长度增长和缩小的矩形制作CSS3无限加载图标.他们最终看起来像:

它使用5 div秒包裹在外部div,并且完美地工作.我想尝试使用SVG重新创建效果,这样我只需要一个图像就可以引用它,而不必添加5个HTML元素.

是)我有的:

我开始使用相同的CSS动画代码,并rect在svg标签内使用了5 秒.动画效果很好,但我不能让矩形垂直居中.由于它们使用x和y坐标(对应于每个矩形的顶部/左侧点)放置,因此它们被固定到该位置.

<svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect class="rect1" fill="black" height="30" width="6" x="0" />
  <rect class="rect2" fill="black" height="30" width="6" x="10" />
  <rect class="rect3" fill="black" height="30" width="6" x="20" />
  <rect class="rect4" fill="black" height="30" width="6" x="30" />
  <rect class="rect5" fill="black" height="30" width="6" x="40" />
</svg>

rect {
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
  alignment-baseline:bottom;
}

.rect2 { …