我在谷歌地图上创建了一个SVG,我想控制SVG对象的宽度和长度
尺寸还可以,但是SVG的位置不在正确的位置.
我怎么能控制对象的位置？
我试图添加变换
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
但后来尺寸不起作用.当我还尝试添加比例并转换为投影时,尺寸也不起作用.你能告诉我如何控制位置和大小吗？SVG的第一个位置应该是相同位置的想法只有大小应该改变但位置应该始终相同.当我改变缩放时当前的问题SVG也改变了位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
html,body,#map {
width: 95%;
height: 95%;
margin: 0;
padding: 0;
}
.stations,.stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
.background {
fill: none;
pointer-events: all;
}
#states path:hover …我有一个XHTML页面,其中SVG作为<svg>元素嵌入其中.我需要实现缩放,但是要求内部<text>元素不能缩放.一个明显的解决方案是
<svg ...>
<!-- Root <g> to programmatically `setAttribute("transform", ...)` -->
<g transform="scale(0.5)">
<!-- Various inner elements here -->
<!-- Here is a text element.
Additional <g> is to apply text position which
*must* depend on the scaling factor set above -->
<g transform="translate(100 50)">
<!-- Apply the opposite scaling factor.
Must be done for every `<text>` element on each change of the scaling factor... -->
<text x="0" y="0" transform="scale(2)">Hello, World!</text>
</g>
</g>
</svg>
有比这更好的解决方案吗？也许,有一种方法可以"重置"内部<text> …
我正在开发一个地图,在Javascript中使用SVG绘制线条.
我想添加一个可以搜索道路的功能,如果找到了道路,地图上会出现一个圆圈.
我知道我可以在SVG中绘制一个圆,但我的问题是,圆的大小不应该根据缩放级别而改变.换句话说,圆圈必须始终具有相同的尺寸.我地图上的道路都有这个功能,我所要做的就是添加
vector-effect="non-scaling-stroke"
到行属性..
一条线看起来像这样.
<line vector-effect="non-scaling-stroke" stroke-width="3" id = 'line1' x1 = '0' y1 = '0' x2 = '0' y2 = '0' style = 'stroke:rgb(255,215,0);'/>
圆圈看起来像这样.
<circle id = "pointCircle" cx="0" cy="0" r="10" stroke="red" stroke-width="1" fill = "red"/>
有可能以某种方式将圆圈定义为"非缩放"吗？