SVG-график с переменной шириной

Question

Я пытаюсь создать SVG-график с фиксированной шириной слева для меток оси x, а затем с переменной шириной, чтобы заполнить оставшееся пространство для фактических результатов графика. Изображение ниже показывает, чего я пытаюсь достичь. До сих пор я не мог понять, как создать область фиксированной ширины и переменной ширины.

Любая помощь с этим будет высоко ценится!

Большое спасибо.

Answer 1

Я бы вложил пару SVG-элементов в ваш основной файл так:

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" >

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

    <svg x="100" >
        <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
    </svg>

</svg>

ПРИМЕЧАНИЕ Я сделал синий элемент SVG полупрозрачным, чтобы вы могли видеть, что ни один из красных SVG не был за ним.

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

EDIT:

Хорошо, тогда мне нужно задать вам вопрос о соотношении сторон. Если вы возьмете квадрат (ширина = высота) и отрежете фиксированную часть со стороны ONE , у вас больше не будет квадрата, и вам придется подумать о том, что это значит для вашего графика.

Полагаю, этот SVG более или менее продемонстрирует то, что вы хотите:

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="600px" height="500px" viewBox="0 0 1200 1000">

<svg width="200">
    <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/>
</svg>

<svg x="200" width="1000" height="1000" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
    <rect x="80%" y="10%" width="10%" height="50%" fill="green"/>
    <rect x="10" y="10" width="70" height="40" fill="gray"/>
</svg>

ПРИМЕЧАНИЕ. Соотношение сторон (AR) для внешних SVG размеров ДОЛЖНО соответствует AR для самого внешнего viewBox, но может иметь различные значения. Аналогично для второго внутреннего SVG, но теперь вы имеете дело с частью общего числа, которая является истинным квадратом, а не прямоугольником. Вы можете изменять ширину и высоту самого внешнего SVG, и до тех пор, пока вы поддерживаете один и тот же AR, весь внутренний код не должен будет изменяться - он будет автоматически масштабироваться:)

Также обратите внимание на различные используемые шкалы и разные типы значений, которые я использовал для координат. Потому что мой второй внутренний SVG 'viewBox устанавливает пользовательские координаты на 100 X 100, 10% и 10 равняются одному и тому же ...

Вы могли бы также установить preserveAspectRatio="none" или другое значение для достижения различных эффектов, но для графика я вроде бы выстроил ряд вещей, поэтому не стал бы.

Последнее замечание - вы можете (и в вашем случае должны) опустить viewBox на внутреннем SVG. Таким образом, масштаб будет одинаковым для всех частей вашего графика. Я просто хвастался силой viewBox:)

Мне только что пришло в голову, что вы можете предпочесть прямоугольник квадрату, поэтому вот пример кода для этого:

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="800px" height="400px" viewBox="0 0 1600 800" >

<svg width="200">
    <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/>
</svg>

<svg x="200" width="1400" height="800" viewBox="0 0 175 100" >
    <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
    <rect x="80%" y="10%" width="10%" height="50%" fill="green"/>
    <rect x="10" y="10" width="70" height="40" fill="gray"/>
</svg>

ПРИМЕЧАНИЕ: ширина внутреннего SVG установлена ​​на 175, чтобы сохранить соотношение сторон 1400/800.