0

我在尝试减少 http 请求并使用 svg 而不是 css3 的东西的小实验中获得乐趣......无法将此 HTML SVG 设置为动态缩放。理想情况下，我想将它的宽度和高度设置为 50%，并让浏览器在窗口调整大小时完成其余的工作。

这是代码：

<svg xmlns="http://www.w3.org/2000/svg">
  <title>Daniel Hutchinson</title>
  <g>
    <path d="m133.936,182.53101h-8.41701v77.21298h8.05002c21.40799,0 39.70398,-11.70999 39.70398,-38.60599c0.00101,-24.70099 -16.28299,-38.60699 -39.33699,-38.60699z" clip-rule="evenodd" fill-rule="evenodd"/>
    <path fill="black" d="m218.448,0c-120.646,0 -218.448,97.802 -218.448,218.448s97.802,218.448 218.448,218.448s218.448,-97.802 218.448,-218.448s-97.80301,-218.448 -218.448,-218.448zm-77.925,290.117h-50.86501v-137.95801h50.86501c38.423,0 70.07701,30.19 70.07701,68.97897s-31.83701,68.97903 -70.07701,68.97903zm210.22499,0h-35.862v-56.53699h-51.78v56.53699h-35.862v-137.95801h35.862v53.24402h51.78v-53.24402h35.862v137.95801l0,0z" clip-rule="evenodd" fill-rule="evenodd"/>
  </g>
</svg>
4

1 回答 1

1

浏览器不会正确缩放 SVG 图像，除非您给它们 a viewBox，我通过在 JSFiddle 中快速试验得出这些数字，您可能只需稍加努力就可以计算出所需的确切值：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 600 600">

您还可以尝试指定width和height属性，不同的浏览器以不同的方式响应它们，尤其是当您使用 CSS 调整它们的大小时。不久前，我打开了一个测试页面，该页面在将 SVG 作为图像嵌入时尝试了所有组合，值得比较（例如）Firefox 和 Chrome 中的不同结果。我希望在 CSS 中使用 SVG 会产生类似的结果。

于 2011-10-22T01:41:31.793 回答