Question

在下面的例子中，我使用CSS和SVG创建了一个闪烁的眼睛动画：http://codepen.io/JamesTheHacker/pen/oLZVrY

它在chrome中运行良好，但在Firefox上，除非我在<rect>上专门提供width和height属性，否则不会出现。

没有属性，眼睛不可见。如果我添加属性，则CSS height动画无效。

Answer 1

在SVG 1.1中，高度和宽度是属性，即您无法通过CSS设置高度和宽度。
在SVG 2中，建议宽度和高度应为CSS属性。

到目前为止，只有Chrome实现了未完成的SVG 2规范的这一部分。

Answer 2

您已经有一个很好的答案，表明问题是什么

你可以这样解决

＆＃13;

* { box-sizing: border-box; }
body { background-color: rgb(0, 184, 234); }

svg {
  display: block;
  margin: 90px auto;
  width: 380px;
  height: 130px;
}

/*
 * Keyframes for blink animation
 */
@keyframes blink {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(0); }
  80% { transform: scaleY(1); }
}

.eye {
  height: 20px;
  width: 20px;
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transform-origin: center 315px;
}

＆＃13;

<svg>
<g transform="translate(-108.75 -258.41)">
	<path id="specs" fill="#FFF" d="M328.911,258.412v10.29h-19.127v16.192h-19.16v16.249h19.287v-16.191h19v62.169h19.432
		v-68.736h123.995v68.761h19.432v-88.709l-18.047,0.001v-0.025h-125.38H328.911z M124.069,258.454v0.001h-15.321v88.709h19.427
		v-68.733h123.996l0.008,68.757h19.423v-62.401h19.032v-16.25h-19.032v-10.053h-18.047v-0.026H124.072L124.069,258.454z
		 M348.294,347.163v17.488h19.4v19.951h85.141v-19.976h-85.109v-17.464H348.294L348.294,347.163z M452.819,347.171v17.439h19.431
		v-17.439H452.819z M128.133,347.203v17.487h19.398v19.951h85.149l-0.008-19.975h-85.117l0.001-17.464h-19.427H128.133z
		 M232.658,347.212v17.439h19.423v-17.439H232.658z"/>
	<g id="eyes">
		<rect class="eye" x="181.759" y="305.026" width="20" height="20" fill="#FFF" />
		<rect class="eye" x="402.759" y="305.026" width="20" height="20"  fill="#FFF" />
	</g>
</g>
</svg>

＆＃13;

为什么在Firefox中，rect需要width和height属性？

2 个答案: