相对于屏幕右侧翻译SVG元素?
问题描述:
是否可以将SVG元素相对于屏幕右侧进行翻译,而不是左上角的是默认值?相对于屏幕右侧翻译SVG元素?
<svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text id="text" class="svgText">test text test text</text>
<rect id="border" class="textOutlineBox" x="0" y="0" width="440.5" height="90"/>
</svg>
#text, #border {
transform-origin: right center;
}
#text {
transform: translate(15vw, 20vh);
}
#border {
transform: translate(10vw, 10vh);
}
当我这样做时,它仍然从屏幕左侧移动。有没有办法让它相对于屏幕右侧进行变形?
jsFiddle描述我的问题here!
答
当您使用CSS translate
(或translateX
或translateY
),你不要在相对于屏幕的边缘元素翻译,但是相对于其中元素会在屏幕上,如果不是翻译。
所以如果你想从屏幕右边向左移动一个SVG rect
,你首先需要把它放在靠近屏幕右边的某个地方。要做到这一点
的一种方式可能是:
- 给这个
<svg>
元素的viewBox
让你有一个家长宽度与 - 工作从
viewBox
的
- 将值2应用为元素的
x
值。
width
减去元素的
width
现在,rect
朝向屏幕的右侧边缘,可以通过给它一个负值translateX
值将它翻译为向左。
工作实施例:
body {
margin: 0;
}
svg {
width: 99vw;
border: 1px solid gray;
}
#border {
transform: translate(-10vw, 10vh);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 200">
<rect id="border" x="559.5" y="0" width="440.5" height="90" />
</svg>