Question

因此，我正在使用SVG元素构建网站以覆盖整个视口。然后，我有了一个响应多边形，该多边形将视口的整个宽度拉伸并带有一些文本。我遇到的问题是我不想拉伸文本，当您使用SVG.JS时，文本只是SVG画布的另一个子级，而又随着视口拉伸。我还希望文本平行于多边形的一部分，您可以在我提供的图中看到它。

所以，从某种意义上说，我需要文本来响应SVG多边形，但也不响应。

我可以通过创建另一个SVG元素（使之与原始元素重叠，并保留长宽比）来使非缩放文本起作用，但是，如图像的图3所示，我想单击多边形以获取动画，并且在顶部放置另一个SVG画布是不可能的。顶部的画布似乎会阻塞下面的onClick事件，并且很难使文本平行。

Diagram of polygon / text

我正在使用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'
})

任何想法都将不胜感激！谢谢。

使用SVG.JS重叠两个SVG元素-一个响应式，一个修复

0 个答案: