Внутренние проклеивающие свойства содержимого SVG - PullRequest
Новая
       14

Внутренние проклеивающие свойства содержимого SVG

0 голосов
/ 03 октября 2018

Я борюсь с внутренним размером элементов SVG.

Из спецификации SVG, глава 8.12.Внутренние свойства размеров SVG-содержимого , мы знаем, что:

Чтобы включить SVG в хост-документы, отформатированные с помощью CSS, необходимо рассчитать размер конкретного объекта.Размер конкретного объекта должен быть рассчитан с использованием алгоритма определения размера по умолчанию

. В качестве входных данных для алгоритма определения размера по умолчанию мы читаем в том же разделе, что:

указанный размер должен быть определен из использованных значений для свойств определения размера по ширине и высоте элемента 'svg'.

И это:

внутренние размеры также должны определяться из свойств определения ширины и высоты.Если ширина или высота не указаны, используемое значение является начальным значением 'auto'. 'auto' и длины в процентах не должны использоваться для определения внутренней ширины или внутренней высоты.

Итак, если у нас не установлены width и heightсамый внешний элемент SVG, у нас есть внутренние размеры ( ширина / высота ) как auto (что смутно рекомендуется).Соответствующая часть Алгоритм определения размера по умолчанию :

Если указанный размер не имеет ограничений (без ширины / высоты):

  1. Если объект имеетвнутренняя высота или ширина, его размер определяется так, как если бы его внутренний размер был задан как указанный размер.
  2. В противном случае его размер разрешается как ограничение содержимого для размера объекта по умолчанию

Наконец, с 8.3.Начальный видовой экран :

Начальная ширина окна просмотра должна быть значением атрибута представления ширины на самом внешнем элементе svg ...

Несмотря на это первоевыше выделено жирным шрифтом, обычно не определяют width и height атрибуты представления для самого внешнего элемента svg.Такие программы, как Adobe Illustrator, обычно пропускают эти свойства и вместо этого просто определяют viewBox.

Таким образом, мои вопросы:

Где в спецификации я могу найти то, что используется ширина и высота элемента svg будут, если для него не установлены атрибуты width и height?

И, по тем же линиям,какими будут размеры viewport в этом же сценарии (с учетом только одного элемента svg)?

В качестве примечания от css-sizing-3 4.Определение внутреннего размера :

Для ящиков с внутренним соотношением сторон, но без внутреннего размера:

Если доступное пространство определено по оси, используйте растягивающую посадкув этот размер для встроенного размера и вычислить размер блока, используя соотношение сторонкак рассчитываются размеры в обоих случаях flexbox).

Примечание. При разметке в виде столбца элемент Flex становится нулевым по ширине.(Это относится к SVG , а не 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 ]

0 голосов
/ 05 октября 2018

Элемент SVG обрабатывается как заменяемый элемент и подчиняется правилам для неизменяемых замененных элементов размером 300px x 150px.

Соответствующий язык спецификации можно найти в спецификации CSS3:

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

Для ящиков без внутреннего аспектного соотношения: если доступное пространство определено в соответствующем измерении, используйте растягивающееся вложение в этот размер в этом измерении.

В противном случае,если у блока есть определенный ненулевой минимальный размер (min-width / min-height) в этом измерении, используйте этот размер.

В противном случае используйте 300px для ширины и / или 150px для высоты по мере необходимости.

0 голосов
/ 03 октября 2018 

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>

«Атрибут« viewBox »в сочетании с атрибутом« preserveAspectRatio »предоставляет возможность растягивать область просмотра SVG для соответствия конкретному контейнеруэлемент ". .

Ширина элемента .i2 составляет приблизительно 100 пикселей.SVG внутри масштабируется в соответствии с доступной шириной.

Ширина элемента .i1 составляет 100% доступного пространства.Внутренние svg масштабируются в соответствии с доступной шириной .i1.

Ширина элементов .i1 и .i2 определяется компоновкой flexbox.Если вы удалите svg внутри элементов .i1 и .i2:

  • , .i2 рухнет: по умолчанию высота пустого элемента равна 0. Его ширина равна 100px (определяетсяоснование гибкого канала)
  • .i1 не будет разрушаться, поскольку его высота определяется базисом гибкого канала (100 пикселей), а ширина по умолчанию составляет 100%.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...