SVG（+；Angular 4？）：如何将响应性大小调整与特定单位相结合

注意：这不是类似的问题的副本。我看到了这些，并将我的

viewbox

属性修改为

viewbox

。这就引出了我的问题

我正在尝试使用Angular 4构建一个（智能游戏格式）编辑器来实践这项技术。我希望这个应用程序能够响应，这样我就可以在智能手机上使用它，就像在桌面上一样，所以我同样希望图形能够响应。SVG似乎是一个不错的选择（名称中有“可伸缩性”），所以我一直在尝试，直到得到一些我喜欢的效果：

在将其复制到Angular应用程序之前，我做了一些研究，以确定是否需要做其他事情来使SVG响应。声明我需要将我的

width

和

height

属性替换为

viewBox

属性，所以我这样做了。我还注意到以下段落，但决定不通过不断引用毫米作为单位来消除：

首先，除非有令人信服的理由，否则在矢量工具中将测量值设置为“像素”。虽然SVG并不重要（在几乎任何测量系统中，SVG都会测量viewBox和元素），但使用通用CSS单位（而不是打印默认的英寸）开发SVG图形是有意义的；此外，它还使以后添加@media查询和其他干预变得更加容易

我运行了Angular应用程序，并惊讶地看到这个相当无用的视图：

在使用

preserveSpectratio

进行了几次修复后，在svg名称空间中插入了

svg

前缀，并试图找到一种角度调整图像大小的方法，我尝试通过删除所有毫米单位名称来投降。结果是前进了一步，后退了两步：图像现在大部分是响应的（它仍然没有正确地调整可用的高度），但反过来，我对木板和石头纹理的过滤器被破坏了：

我怎样才能得到一个SVG，它可以根据我的需要相应地调整大小，同时仍然具有需要毫米分辨率的过滤器？

---

而且，虽然我愿意问一个新问题，这可能是一个单独的问题，但如果有人知道如何根据可用屏幕高度调整宽度，就像

preserveSpectratio

所期望的那样，我将不胜感激，如果有人也能给出答案：）

过滤器和大小调整是一件棘手的事情。如果应用到越来越大和越来越小的元素，情况看起来就不一样了

当您删除所有

mm

单位时，您所做的是将您的图形缩小约4倍。确切地说，这取决于你的屏幕分辨率。对于90 dpi的分辨率，系数为3.5433。如果在源代码中使用单位

mm

对每个值进行缩放，结果将是您想要的结果

技术背景：

元素具有一个默认值为

userSpaceOnUse

的属性

primitiveUnits

。这意味着聚光灯的位置和过滤器中定义的其他值等内容将有效地以像素单位表示，而应用它们的元素的大小以mm为单位。（这非常简单，但我不打算在这里解释视口、变换和用户空间坐标。）删除

mm

会使过滤器和元素的相对大小超出比例

我建议不要尝试重新计算这些过滤器值。有很多值，但很明显，其中哪些表示长度，哪些表示像素

返回到您的起始版本。如果要重新计算，最好缩放所有mm值。这些更多，但你可以识别它们

然后，像这样启动SVG文件，假设为90dpi：

<svg
    version="1.1"
    width="100%"
    height="100%"
    viewBox="0 0 1503 1608.67"
    preserveAspectRatio="xMinYMin meet"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

如果您想知道，这些单位默认是图元边界框的倍数

照明过滤器有语法错误。过滤器原语没有

out

属性。它被称为

result

：

    <filter id="lighting">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="bump" />

最后，电路板矩形应以绝对尺寸书写：

    <rect
        width="1503"
        height="1608.67"
        style="fill: rgb(220,168,71); filter: url(#woodGrain);" />

最后，如果返回到第一个版本，您可以忽略一条注释。这里只是关于SVG大小的一般性讲座

---

您的上一个版本显示了一个误解：

元素没有大小。不能在此处设置宽度、高度和视口框。如果在子元素（如

）中使用百分比大小，它们将引用

元素的大小。这并没有

视图框的大小，而是用
宽度和
高度属性设置的。根据
preserveAspectRatio
规则，
viewBox
安装在其内部，但是溢出
viewBox
的部分仍然可见，并且仅在
的边界处剪裁。老实说，在这种用例中使用SVG过滤器是对计算资源的浪费。如果需要，将它们设计为SVG，然后将它们保存为高分辨率PNG。缩小这些图像的计算能力远小于计算滤波效果所需的计算能力

如果你使用无缝模式来实现木纹效果，你最终会得到三张最多几百kB的图像。因此，这甚至不是带宽问题，移动设备用户将感谢您。
感谢您的帮助。正如您可能猜到的，我是SVG初学者。我曾经得到我的屏幕像素与毫米的比率（3.77813）。然后，我编写了一个Python脚本，生成一个文件版本，替换了所有毫米单位。然后我添加了除“out->result”修复之外的所有修改
    <rect
        width="1503"
        height="1608.67"
        style="fill: rgb(220,168,71); filter: url(#woodGrain);" />