相关疑难解决方法(0)

我是否将<img>,<object>或<embed>用于SVG文件?

我应该使用<img>,<object><embed>加载SVG文件到一个页面类似于加载的方式jpg,gif还是png

每个代码的代码是什么,以确保它尽可能地工作?(我在我的研究中看到了包括mimetype或指向后备SVG渲染器的参考,并没有看到一个很好的最新参考).

假设我正在检查与Modernizr的 SVG支持,并<img>为不支持SVG的浏览器退回(可能用普通标签替换).

html svg vector-graphics

565
推荐指数
12
解决办法
56万
查看次数

如何缩放SVG图像以填充浏览器窗口?

这似乎应该很容易,但我只是没有得到什么.

我想创建一个包含单个SVG图像的HTML页面,该图像会自动缩放以适应浏览器窗口,无需任何滚动,同时保留其纵横比.

例如,目前我有一个1024x768的SVG图像; 如果浏览器视口是1980x1000,那么我希望图像显示为1333x1000(垂直填充,水平居中).如果浏览器是800x1000,那么我希望它以800x600显示(水平填充,垂直居中).

目前我的定义如下:

<body style="height: 100%">
  <div id="content" style="width: 100%; height: 100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

然而,这是扩展到浏览器的整个宽度(对于宽而短的窗口)并产生垂直滚动,这不是我想要的.

我错过了什么?

xhtml layout scaling svg aspect-ratio

86
推荐指数
1
解决办法
7万
查看次数

标签 统计

svg ×2

aspect-ratio ×1

html ×1

layout ×1

scaling ×1

vector-graphics ×1

xhtml ×1