代码之家 › 专栏 › 技术社区 › Magnus

SVG含量的内在施胶特性

flexbox svg css3 css html

Magnus · 技术社区 · 6 年前

我正在努力调整SVG元素的内在大小。

从SVG规范第章 8.12. Intrinsic sizing properties of SVG content 我们知道:

要允许在用CSS格式化的宿主文档中包含SVG,请执行以下操作: 必须计算具体对象大小。具体对象大小必须使用默认大小调整算法计算

作为默认大小调整算法的输入,我们在同一节中读到:

这个 指定尺寸 必须根据 __svg_秷元素的宽度和高度调整属性。

那就是:

这个 固有尺寸 还必须根据宽度和高度调整属性。如果未指定宽度或高度, 使用的值是初始值“auto”。 “自动”和百分比长度不能用于确定内部宽度或内部高度。

所以,如果我们没有 width 和 height 设置在最外层的svg元素上,我们有 固有尺寸 ( 宽度 / 高度作为 auto (这是含糊其辞的建议)。相关部分 Default Sizing Algorithm :

如果指定的大小没有约束(没有宽度/高度):

如果对象具有固有的高度或宽度,则会解析其大小。就好像它的内部大小被指定为指定的大小。

否则,其大小将解析为对默认对象大小的包含约束。

最后,从 8.3. The initial viewport :

初始视区的宽度,必须是宽度的值最外层svg元素的presentation属性…

尽管有上述第一个大胆的警告,但这是正常的不定义 宽度 和 高度 最外层SVG元素的表示属性。像AdobeIllustrator这样的程序通常会忽略这些属性,而只是定义 viewBox .

因此我的问题是:

我在哪里能找到用过的宽度和高度如果没有 宽度 和 高度 在上面设置属性?

而且,沿着同样的路线视口在相同的场景中,维度是(仅给定一个SVG元素)?

作为旁注,来自css-sizing-3 4. Intrinsic Size Determination :

对于具有固有纵横比但没有固有大小的框:

如果可用空间在内联轴中是确定的,则使用拉伸与内联大小匹配并计算块大小使用纵横比。

一些代码

演示我无法理解的行为(即在两个flexbox情况下如何计算维度)。

注:按列排列时,柔性项的宽度变为零。(这与 静止无功发生器 不是 柔性箱 )

.c1,
.c2 {
  display: flex;
  height: 500px;
  align-items: flex-start;
}

.c1 {
  flex-flow: row nowrap;
  border: 1px solid green;
}

.c1 .i1 {
  flex: 0 1 100px;
  border: 1px solid blue;
}

.c2 {
  flex-flow: column nowrap;
  border: 1px solid green;
}

.c2 .i2 {
  flex: 0 1 100px;
  border: 1px solid red;
}

<div class="c1">
  <div class="i1">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
      <defs>
        <g id="SVG" fill="#fff" transform="scale(2) translate(20,79)">
	<path id="S" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z"/>
	<path id="V" d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z"/>
	<path id="G" d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z"/>
        </g>
      </defs>
      <path id="base" fill="#000" d="M8.5,150 H291.5 V250 C291.5,273.5 273.5,291.5 250,291.5 H50 C26.5,291.5 8.5,273.5 8.5,250 Z"/>
      <g stroke-width="38" stroke="#000">
        <g id="svgstar" transform="translate(150, 150)">
          <path id="svgbar" fill="#ffb13b" d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"/>
          <use xlink:href="#svgbar" transform="rotate(45)"/>
          <use xlink:href="#svgbar" transform="rotate(90)"/>
          <use xlink:href="#svgbar" transform="rotate(135)"/>
        </g>
      </g>
      <use xlink:href="#svgstar"/>
      <use xlink:href="#base" opacity="0.85"/>
      <use xlink:href="#SVG"/>
    </svg>
  </div>
</div>


<div class="c2">
  <div class="i2">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
      <defs>
        <g id="SVG" fill="#fff" transform="scale(2) translate(20,79)">
	<path id="S" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z"/>
	<path id="V" d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z"/>
	<path id="G" d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z"/>
        </g>
      </defs>
      <path id="base" fill="#000" d="M8.5,150 H291.5 V250 C291.5,273.5 273.5,291.5 250,291.5 H50 C26.5,291.5 8.5,273.5 8.5,250 Z"/>
      <g stroke-width="38" stroke="#000">
        <g id="svgstar" transform="translate(150, 150)">
          <path id="svgbar" fill="#ffb13b" d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"/>
          <use xlink:href="#svgbar" transform="rotate(45)"/>
          <use xlink:href="#svgbar" transform="rotate(90)"/>
          <use xlink:href="#svgbar" transform="rotate(135)"/>
        </g>
      </g>
      <use xlink:href="#svgstar"/>
      <use xlink:href="#base" opacity="0.85"/>
      <use xlink:href="#SVG"/>
    </svg>
  </div>
</div>

2 回复 | 直到 6 年前

enxaneta 6 年前

body {
  box-sizing: border-box;
}

.c1 {
  display: flex;
  flex-flow: column nowrap;
}

.c1 .i1 {
  flex: 0 1 100px;
  border: 1px solid red;
}

.c2 {
  display: flex;
  flex-flow: row nowrap;
}

.c2 .i2 {
  flex: 0 1 100px;
  border: 1px solid blue;
}

<div class="c2">
  <div class="i2">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
      <defs>
        <g id="SVG" fill="#fff" transform="scale(2) translate(20,79)">
	<path id="S" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z"/>
	<path id="V" d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z"/>
	<path id="G" d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z"/>
        </g>
      </defs>
      <path id="base" fill="#000" d="M8.5,150 H291.5 V250 C291.5,273.5 273.5,291.5 250,291.5 H50 C26.5,291.5 8.5,273.5 8.5,250 Z"/>
      <g stroke-width="38" stroke="#000">
        <g id="svgstar" transform="translate(150, 150)">
          <path id="svgbar" fill="#ffb13b" d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"/>
          <use xlink:href="#svgbar" transform="rotate(45)"/>
          <use xlink:href="#svgbar" transform="rotate(90)"/>
          <use xlink:href="#svgbar" transform="rotate(135)"/>
        </g>
      </g>
      <use xlink:href="#svgstar"/>
      <use xlink:href="#base" opacity="0.85"/>
      <use xlink:href="#SVG"/>
    </svg>
  </div>
</div>


<div class="c1">
  <div class="i1">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
      <defs>
        <g id="SVG" fill="#fff" transform="scale(2) translate(20,79)">
	<path id="S" d="M 5.482,31.319 C2.163,28.001 0.109,23.419 0.109,18.358 C0.109,8.232 8.322,0.024 18.443,0.024 C28.569,0.024 36.782,8.232 36.782,18.358 L26.042,18.358 C26.042,14.164 22.638,10.765 18.443,10.765 C14.249,10.765 10.850,14.164 10.850,18.358 C10.850,20.453 11.701,22.351 13.070,23.721 L13.075,23.721 C14.450,25.101 15.595,25.500 18.443,25.952 L18.443,25.952 C23.509,26.479 28.091,28.006 31.409,31.324 L31.409,31.324 C34.728,34.643 36.782,39.225 36.782,44.286 C36.782,54.412 28.569,62.625 18.443,62.625 C8.322,62.625 0.109,54.412 0.109,44.286 L10.850,44.286 C10.850,48.480 14.249,51.884 18.443,51.884 C22.638,51.884 26.042,48.480 26.042,44.286 C26.042,42.191 25.191,40.298 23.821,38.923 L23.816,38.923 C22.441,37.548 20.468,37.074 18.443,36.697 L18.443,36.692 C13.533,35.939 8.800,34.638 5.482,31.319 L5.482,31.319 L5.482,31.319 Z"/>
	<path id="V" d="M 73.452,0.024 L60.482,62.625 L49.742,62.625 L36.782,0.024 L47.522,0.024 L55.122,36.687 L62.712,0.024 L73.452,0.024 Z"/>
	<path id="G" d="M 91.792,25.952 L110.126,25.952 L110.126,44.286 L110.131,44.286 C110.131,54.413 101.918,62.626 91.792,62.626 C81.665,62.626 73.458,54.413 73.458,44.286 L73.458,44.286 L73.458,18.359 L73.453,18.359 C73.453,8.233 81.665,0.025 91.792,0.025 C101.913,0.025 110.126,8.233 110.126,18.359 L99.385,18.359 C99.385,14.169 95.981,10.765 91.792,10.765 C87.597,10.765 84.198,14.169 84.198,18.359 L84.198,44.286 L84.198,44.286 C84.198,48.481 87.597,51.880 91.792,51.880 C95.981,51.880 99.380,48.481 99.385,44.291 L99.385,44.286 L99.385,36.698 L91.792,36.698 L91.792,25.952 L91.792,25.952 Z"/>
        </g>
      </defs>
      <path id="base" fill="#000" d="M8.5,150 H291.5 V250 C291.5,273.5 273.5,291.5 250,291.5 H50 C26.5,291.5 8.5,273.5 8.5,250 Z"/>
      <g stroke-width="38" stroke="#000">
        <g id="svgstar" transform="translate(150, 150)">
          <path id="svgbar" fill="#ffb13b" d="M-84.1487,-15.8513 a22.4171,22.4171 0 1 0 0,31.7026 h168.2974 a22.4171,22.4171 0 1 0 0,-31.7026 Z"/>
          <use xlink:href="#svgbar" transform="rotate(45)"/>
          <use xlink:href="#svgbar" transform="rotate(90)"/>
          <use xlink:href="#svgbar" transform="rotate(135)"/>
        </g>
      </g>
      <use xlink:href="#svgstar"/>
      <use xlink:href="#base" opacity="0.85"/>
      <use xlink:href="#SVG"/>
    </svg>
  </div>
</div>

"The âviewBoxâ attribute, in conjunction with the âpreserveAspectRatioâ attribute, provides the capability to stretch an SVG viewport to fit a particular container element." .

的宽度 .i2 元素约为100px。SVG内部缩放以适合可用的宽度。

的宽度 .i1 元素是可用空间的100%。SVG内部缩放以适应 I1 .

宽度 I1 和 I2 元素由flexbox布局决定。如果你移除里面的SVG I1 和 I2 元素:

这个 I2 将折叠:默认情况下,空元素的高度为0。它的宽度是100px(由弹性基础决定)
这个 I1 不会折叠,因为它的高度由flex基础(100px)确定,而它的宽度默认为100%。

Michael Mullany 6 年前

SVG元素被视为替换元素,并遵循300px x 150px的非尺寸替换元素的规则。

您可以在CSS3规范中找到相关规范语言:

https://www.w3.org/TR/css-sizing-3/

对于没有内部纵横比的框:如果可用空间为确定合适的尺寸,使用拉伸配合尺寸在那个尺寸。

否则,如果盒子有一个确定的非零最小尺寸 (最小宽度/最小高度)在该尺寸中,使用该尺寸。

否则,使用300px作为宽度和/或150px作为高度需要。