У меня есть два вектора SVG, которые я перекрыл с помощью CSS. См. here. Формы являются следующие:Как перекрывать два вектора SVG без использования встроенного SVG?
<svg id="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
</svg>
<svg id="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>
Если изменить CSS, удалив position:absolute
(проверьте следующее), затем они становятся двумя отдельными фигурами. Они больше не перекрываются (остаются в этом случае рядом).
* {
/* position: absolute; */
}
#path1{
margin: 10px;
padding: 50px;
border: 1px solid;
}
#path2{
margin: 10px;
padding: 50px;
border: 1px solid red;
}
В этом вопросе: How to overlap two SVG images?, он говорит, что CSS является одним из решений, или я мог бы использовать их как внутри одного SVG тега (встроенный SVG).
- Я не могу использовать CSS; потому что мне нужно разместить фигуры на другой странице HTML. Там, если я держу
position: absolute
, он создает всевозможные беспорядки, как вы можете себе представить. - Я не могу использовать встроенный SVG; потому что я пытаюсь анимировать фигуры с помощью Vivus. Эта библиотека JS требует, чтобы обе фигуры находились внутри отдельного тега SVG. Поэтому мне нужно сохранить фигуры в двух разных тегах SVG, чтобы они были оживлены отдельно.
Есть ли какой-либо другой гений для этой проблемы? (без CSS или встроенного SVG)
Я понятия не имею, почему имеющий функцию JS, которая будет вызвана для каждого изображения отдельно исключает их от рядный. Вопрос довольно нечеткий, особенно, поскольку все позиционирование в html осуществляется через CSS, поэтому, если вы не можете использовать CSS, вы почти ничего не можете сделать в html. –
@RobertLongson, библиотека JS требует, чтобы фигуры были в теге SVG. Мне нужны две анимации, а не одна. Наличие их встроенных означает, что у меня есть только один тег SVG и, следовательно, только одна анимация. Надеюсь, я поняла. – 0aslam0
Я обновил вопрос. Пожалуйста, удалите нижний предел – 0aslam0