SVG отзывчив на div

Как сказано в названии, я хочу добавить анимацию SVG-границы в div. Я судимый со статическим DIV, но теперь я хочу, чтобы она работает, даже если ширина DIV и высота изменение динамически (как класс миниатюр с Bootstrap)SVG отзывчив на div

Вот мой SVG:

<svg> 
    <line class="top" x1="0" y1="0" x2="3000" y2="0"/> 
    <line class="left" x1="0" y1="3000" x2="0" y2="0"/> 
    <line class="bottom" x1="3000" y1="300" x2="0" y2="300"/> 
    <line class="right" x1="300" y1="0" x2="300" y2="300"/> 
</svg>

Спасибо за помощь , вот jsbin: http://jsbin.com/suvinakaqa/1/edit

источник

2016-05-03 Nathan30

вам нужен левые одушевленные строк до конца DIV и верхней строки до правой части DIV Do? –

На данный момент анимация на самом деле не проблема, я хочу, чтобы 4 строки идеально соответствовали div, даже если div имеет процентную ширину/высоту – Nathan30

Если вы хотите, чтобы SVG ответно заполнить <div>, вы должны дать ему viewBox и установить preserveAspectRatio="none" так, что она простирается, чтобы заполнить <div> как горизонтально, так и вертикально. В противном случае он просто сохранит соотношение сторон и просто увеличит или уменьшит масштаб до <div>.

Обратите внимание, что растяжение, которое происходит, когда вы отключили соотношение сторон, приведет к тому, что горизонтальные линии будут иметь разную ширину для вертикальных. Чтобы исправить это, вы можете добавить vector-effect="non-scaling-stroke" к строкам.

.myDiv 
 
{ 
 
    width: 100%; 
 
    height: 300px; 
 
}

<div class="myDiv"> 
 
    <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" 
 
     stroke="black" stroke-width="4"> 
 
    <line class="top" x1="0" y1="0" x2="100" y2="0" vector-effect="non-scaling-stroke"/> 
 
    <line class="left" x1="0" y1="100" x2="0" y2="0" vector-effect="non-scaling-stroke"/> 
 
    <line class="bottom" x1="100" y1="100" x2="0" y2="100" vector-effect="non-scaling-stroke"/> 
 
    <line class="right" x1="100" y1="0" x2="100" y2="100" vector-effect="non-scaling-stroke"/> 
 
    </svg> 
 
</div>

источник

2016-05-03 12:21:55

Awesome , большое спасибо за вашу помощь: D – Nathan30

Но у меня была еще одна странная проблема. У меня есть класс миниатюр, когда вы наводите его на текст в div. Я хочу также сделать в нем анимацию границы svg. Но линия SVG не будет анимировать, и я не знаю, почему вот jsbin, демонстрирующий совершенно мою проблему: http://jsbin.com/gezativuca/1/edit заранее заблаговременно – Nathan30

Это действительно должен быть другой вопрос , Но причина в том, что вы используете селектор с «' .thumb: hover> .svg-text' ... ». Однако '.svg-text' не является прямым дочерним элементом' .thumb'. Это внук. –

-1

Для например, вы в следующий HTML

<div class="myClass"> 
    <svg> 
     <line class="top" x1="0" y1="0" x2="3000" y2="0"/> 
     <line class="left" x1="0" y1="3000" x2="0" y2="0"/> 
     <line class="bottom" x1="3000" y1="300" x2="0" y2="300"/> 
     <line class="right" x1="300" y1="0" x2="300" y2="300"/> 
    </svg> 
</div>

Пожалуйста, используйте следующий CSS

.myClass svg{ 
    width:100% !important; 
    height:auto; 
}

источник

2016-05-03 11:36:14

Если мы используем height: auto; левая линия не анимируется до конца div ... –

Спасибо за помощь, но не решая мою начальную проблему. – Nathan30

Вам нужно будет использовать запросы СМИ и Javascript/jQuery для обработки ширины и высоты строк. –

ответ

Смежные вопросы