SVG Отзывчивый Текст

Question

У меня есть SVG в пределах веб-страницы, она состоит из изображений + текст

<object data="/infographic/timeline.svg" type="image/svg+xml">  
    <img src="/infographic/timeline.svg" alt="Timeline"> 
</object> 

Все изображения реагируют, но текст не является, так что текст становится действительно, очень мало.

фрагмент SVG (его массивным)

<defs> 
    <style> 
     .cls-1 { 
     font-size: 60.014px; 
     } 

    .cls-1, .cls-10 { 
    opacity: 0.69; 
    } 

    .cls-1, .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 { 
    fill: #ffffff; 
    } 

    .cls-1, .cls-10, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-9 { 
    text-anchor: middle; 
    } 

    .cls-1, .cls-3, .cls-6 { 
    font-family: "Roboto"; 
    } 

    .cls-2 { 
    font-size: 32.014px; 
    } 

    .cls-3 { 
    font-size: 14.089px; 
    } 

    .cls-3, .cls-6 { 
    fill: #db7426; 
    } 

    .cls-4, .cls-6 { 
    font-size: 32px!important; 
    } 

    .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 { 
    font-family: Roboto; 
    } 

    .cls-5 { 
    font-size: 24px; 
    } 

    .cls-5, .cls-8, .cls-9 { 
    font-weight: 400; 
    } 

    .cls-6 { 
    font-weight: 600; 
    } 

    .cls-10, .cls-7 { 
    font-size: 18.75px; 
    font-weight: 300; 
    } 

    .cls-7 { 
    opacity: 0.4; 
    } 

    .cls-8, .cls-9 { 
    font-size: 22px; 
    } 
</style> 
</defs> 

<text id="Who_are_you_what_do_you_do_what_s_your_why_What_s_been_keepi" data-name="Who are you, what do you do, what’s your why? What’s been keepi" class="cls-8" x="397.706" y="535.325">Who are you, what do you do, what’s your why?<tspan x="397.706" dy="26.4">What’s been keeping you lying awake at night. </tspan></text> 

Есть в любом случае я могу получить размер шрифта увеличить в ширину SVG/экран становится меньше?

Любая помощь была бы принята с благодарностью.

Answer 1

Это невозможно с чистым SVG (по крайней мере, пока). Единственным решением может быть либо:

1. встроенный SVG и манипулировать размером текста с помощью javascript.

2. встроенный SVG и управляйте размером текста медиа-запросами (см. Ниже).

3. Добавить CSS в SVG и использовать там запросы к мультимедиа (см. Ниже).

4. использование медиа запросов для переключения SVGs, когда страница получает небольшой

Пример опционных 2: Использование запросов СМИ с встраиваемым SVGs

text { 
 
    font-size: 10px; 
 
} 
 

 
@media (max-width: 400px) { 
 
    text { 
 
    font-size: 20px; 
 
    } 
 
}

<svg viewBox="0 0 100 100" width="100%" height="100%"> 
 
    <circle cx="50" cy="50" r="50" fill="orange"/> 
 
    <text x="50" y="60" text-anchor="middle">Testing</text> 
 
</svg>

Пример варианта 3: Использование медиа-запросов в CSS в SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%"> 
    <style> 
    text { 
     font-size: 10px; 
    } 

    @media (max-width: 400px) { 
     text { 
     font-size: 20px; 
     } 
    } 
    </style> 
    <circle cx="50" cy="50" r="50" fill="orange"/> 
    <text x="50" y="60" text-anchor="middle">Testing</text> 
</svg>