Блог

Главная - Вопросы по программированию - SVG в гибком поле исчезает в Chrome

SVG в гибком поле исчезает в Chrome

#html #css #google-chrome #firefox #svg

#HTML #css — код #google-chrome #firefox #svg #css

Вопрос:

Я использую svg внутри гибкого блока, чтобы центрировать букву внутри div. Буква должна иметь максимальный размер, но в противном случае она должна уменьшаться, если div слишком мал. (У меня нет контроля над размером div.)

Однако по какой-то причине он работает так, как я ожидаю в Firefox, но элемент полностью исчезает в Chrome (ium). Я не знаю, является ли ошибка моей или в Firefox или Chrome. Есть идеи, что происходит не так?

Вот полный файл:

 <html><body>
    <div style="width:20%; height:300px; background-color:#cfc; border: solid 1px black; display:flex; justify-content:center; align-items:center;">
        <svg style="display:block; font-family:sans; background-color:#ffc; max-width:200px;" viewBox="0 0 10 10">
            <text style="font-size:10px;" x="50%" y="60%" dominant-baseline="middle" text-anchor="middle">X</text>
        </svg>
    </div>
</body></html>

Ответ №1:

Неважно — добавление «width: 100%» в SVG исправило это. Тем не менее, это странная разница между Firefox и Chrome, которая, я уверен, вызовет у других головную боль.

Ответ №2:

изменить max-width на width 

 <div style="width:20%; height:300px; background-color:#cfc; border: solid 1px black; display:flex; justify-content:center; align-items:center;">
        <svg style="display:block; font-family:sans; background-color:#ffc; width:200px;" viewBox="0 0 10 10">
            <text style="font-size:10px;" x="50%" y="60%" dominant-baseline="middle" text-anchor="middle">X</text>
        </svg>
    </div>

https://jsfiddle.net/lalji1051/dc9uyt12/5/

Комментарии:

1. Это работает, но удаляет необходимую максимальную ширину. Тем не менее, спасибо.