Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
可调整大小的html svg图像_Html_Svg_Resize_Responsive Design - Fatal编程技术网

可调整大小的html svg图像

可调整大小的html svg图像,html,svg,resize,responsive-design,Html,Svg,Resize,Responsive Design,我正在做一个小实验,尝试减少http请求并使用svg而不是css3之类的东西。。。无法将此HTML SVG设置为动态缩放。理想情况下,我希望将其宽度和高度设置为50%,并让浏览器在窗口调整大小时执行其余操作 代码如下: <svg xmlns="http://www.w3.org/2000/svg"> <title>Daniel Hutchinson</title> <g> <path d="m133.936,182.53101

我正在做一个小实验,尝试减少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>

丹尼尔·哈钦森

浏览器无法正确缩放SVG图像,除非您给它们一个
视图框,我很快就得出了这些数字,您可能只需稍加努力就可以计算出所需的确切值:

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


您还可以尝试指定
width
height
属性,不同的浏览器以不同的方式响应这些属性,特别是当您使用CSS调整它们的大小时。前一段时间,我发现比较(比如)Firefox和Chrome的不同结果是值得的。我希望在CSS中使用SVG会得到类似的结果。

你不能用CSS来缩放它吗?我会。。理想情况下,我会将它的宽度设置为css中的50%,它将处理其余部分