Использование SVG.JS для перекрытия двух элементов SVG - одного адаптивного, одного фиксированного - PullRequest
Новая
       52

Использование SVG.JS для перекрытия двух элементов SVG - одного адаптивного, одного фиксированного

0 голосов
/ 15 октября 2018

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

Итак, в некотором смысле мне нужен текст для ответа на многоугольник SVG, но такжене ответил на него.

Я смог заставить работать немасштабируемый текст, создав еще один SVG-элемент, перекрывающий исходный с сохраненным соотношением сторон ... однако, как на диаграмме 3 изображения,Я хочу щелкнуть многоугольник для анимации, и, если поверх поверх него сделать еще один холст SVG, это невозможно.Может показаться, что ваш холст сверху блокирует нижний для событий onClick, плюс трудно сделать текст параллельным.

Диаграмма многоугольника / текста

Я используюSVG.JS, но если вы можете предложить помощь с использованием SVG, HTML, CSS, это также полезно.

HTML: 

<div id="maindiv">
</div>

JS (SVG.JS) с текстом, созданным на новомхолст: 

var draw = SVG('maindiv').viewbox('0 0 500 500').attr({ 'preserveAspectRatio': 'none' })
var polyg = draw.polygon('0,100 500,200 500,500 0,500').fill('black')

polyg.click(function() {
   this.animate().attr({'points':'0,200 500,300 500,500 0,500'})
})

var txtcanv = SVG('maindiv').style({'position':'fixed'})
var title = txtcanv.text('Tim Iland Design').font({
  family: 'Arial'
, weight: 'bold'
, size: 30
,fill: '#f06'
})

Любые идеи с благодарностью!Спасибо.

...