Шкала SVG (100% - 60px)

Question

Я пытаюсь создать изображение SVG с содержимым, ширина которого на 100% превышает ширину контейнера, минус 60 пикселей для некоторого текста.

Если я использовал HTML или SVG с javascript У меня не будет проблем с этим. Но я чувствую, что должен быть способ сделать это с помощью SVG (и CSS, если необходимо).

Я хочу эквивалент этого ( Codepen здесь ):

<svg width="100%" height="100%">
  <rect fill="#ccc" x="0" y="0" width="100%" height="100%"></rect>

  <text x="100%" y="50%" stroke="black" text-anchor="end">Y-axis</text>

  <svg width="100%" height="100%">
    <!-- This rect represents the entirety of the contents of the graph -->
    <rect x="0" y="0" style="width: calc(100% - 60px)" height="100%" fill="#c88"></rect>
  </svg>
</svg>

В приведенном выше фрагменте внутренний <rect> изменяется до 100% - 60px ширины элемента контейнера. Однако этот трюк работает только для одного элемента - если вы замените этот <rect> на сложную структуру SVG, он больше не будет работать.

Вещи Я пробовал:

1. Выполнение transform: scale() через CSS на <rect> - я не могу понять, что положить в scale(), чтобы он вел себя как 100% - 60px.
2. Изменение ширины вложенного <svg> элемента
   • <svg width="calc(100% - 60px)"> не работает - не может сделать calc() внутри атрибута width
   • <svg width="100%" style="width: calc(100% - 60px);"> (с атрибутом width или без него) - не работает - свойство CSS "width" игнорируется независимо от того, присутствует ли атрибут width.

Я начинаю думать, что то, что я хочу сделать, сейчас невозможно с SVG, но это не похоже на необычный вариант использования. Есть ли способ сделать это?

Answer 1

Как уже говорилось в комментариях, вам может повезти, если вы сделаете то же самое, сделав область графика 100% viewBox, но поместите SVG в контейнер с отступом 60px справа для учета текстового пространства. .

Перемещение вашего текста (и фона rect) на x="100%" с text-anchor="start", в дополнение к переполнению SVG, вы можете получить довольно близкий результат без необходимости преобразовывать вашу графику c, поскольку у вас есть фиксированное значение 60px, на которое вы всегда можете положиться:

div {
  padding-right: 60px;
}
svg {
  overflow: visible;
}

<div>
  <svg width="100%" height="100%">
    <rect fill="#ccc" x="100%" y="0" width="60px" height="100%"></rect>

    <text x="100%" y="50%" stroke="black" text-anchor="start">Y-axis</text>

    <rect x="0" y="0" width="100%" height="100%" fill="#c88"></rect>
  </svg>
</div>

PS: Возможно, вы бы предпочли, чтобы ваш текст имел text-anchor="middle", и преобразуйте его в CSS с помощью transform: translateX(30px), чтобы поместить его в центр область «текст» - так может выглядеть чище:

div {
  padding-right: 60px;
}
svg {
  overflow: visible;
}
text {
  transform: translateX(30px);
}

<div>
  <svg width="100%" height="100%">
    <rect fill="#ccc" x="100%" y="0" width="60px" height="100%"></rect>

    <text x="100%" y="50%" stroke="black" text-anchor="middle">Y-axis</text>

    <rect x="0" y="0" width="100%" height="100%" fill="#c88"></rect>
  </svg>
</div>