定位<；对象>；关于svg路径_Svg_Path

定位<；对象>；关于svg路径

svg path

定位<；对象>；关于svg路径,svg,path,Svg,Path,我有一堆使用相同svg路径的对象，基本上是一个箭头。我想将对象放置在圆的另一个svg路径上，使箭头看起来像是向外“辐射”的我读过几篇文章说，使用svg的可以提供更多的控制，但我找不到如何将定位到另一个svg的路径（圆圈）与手动旋转每个不同，我希望沿着一条路径定位它们，以便将来更容易为它们设置动画。我希望它们在翻滚时从中心向外移动一点，并且我认为使用路径而不是手动设置每个箭头的动画会更容易我可以沿着这样的路径设置动画通过将“跟随路径”上的路径更改为一个圆，但我不想设置动画，只需定位更新：

我有一堆使用相同svg路径的对象，基本上是一个箭头。我想将对象放置在圆的另一个svg路径上，使箭头看起来像是向外“辐射”的

我读过几篇文章说，使用svg的

可以提供更多的控制，但我找不到如何将

定位到另一个svg的

路径（圆圈）

与手动旋转每个

不同，我希望沿着一条路径定位它们，以便将来更容易为它们设置动画。我希望它们在翻滚时从中心向外移动一点，并且我认为使用路径而不是手动设置每个箭头的动画会更容易

我可以沿着这样的路径设置动画通过将“跟随路径”上的路径更改为一个圆，但我不想设置动画，只需定位

更新：我似乎能在网上找到的唯一能将元素放到路径上的东西是animationTransform或沿路径设置某个元素的动画，但我只想沿另一个元素（路径）放置元素，如下所示：额外突出的箭头是我计划在未来的翻滚中如何设置它的动画…但现在我只是好奇如何定位箭头。我也没有很多，但这只是一个开始，我终于开始工作了。感谢您的帮助

我只是在想，用css3或svg将箭头旋转成一个圆圈会更好吗？

您的应用程序演示了svg整洁的动态特性。我希望我的回答不要太冗长：）

创建“箭头”，使其中心/底点位于（0,0）-这用于将箭头放置在圆周围，并用于onmouseover的“hilite/extend”功能

我建议为每个黑色和灰色箭头使用多边形而不是路径。然后放置在

中，以创建所需的use元素。 e、 g

下面是一个示例，您可以将其放在.htm文档中查看它的工作情况。这对IE/CH/FF测试正常

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<center>
<div id="svgDiv" style='background-color:lightblue;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
<defs>
<polygon id="myBlackArrow" points="10,0 -10,0 -10,-80 -15,-80 0,-100 15,-80 10,-80"  fill="black" />
<polygon id="myGrayArrow" points="10,0 -10,0 -10,-80 -15,-80 0,-100 15,-80 10,-80"  fill="silver" />
</defs>
</svg>
</div>
<button onClick=placeArrowsAroundCircle()>Place Arrows Around Circle</button>
</center>
<script id=myScript>
var NS="http://www.w3.org/2000/svg"
var xref="http://www.w3.org/1999/xlink"
var centerX=200
var centerY=200
//---every 40 degrees around a center point--
//---button---
function placeArrowsAroundCircle()
{
    for(var k=0;k<9;k++)
    {
        var rotateAngle=k*40
        var grayArrow=document.createElementNS(NS,"use")
        grayArrow.setAttributeNS(xref,"href", "#myGrayArrow")
        grayArrow.setAttribute("onmouseover", "hilite(evt)")
        grayArrow.setAttribute("onmouseout", "unhilite(evt)")
        grayArrow.setAttribute("rotateAngle", rotateAngle)
        grayArrow.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
        mySVG.appendChild(grayArrow)
    }

    for(var k=0;k<9;k++)
    {
        var rotateAngle=k*40+20
        var blackArrow=document.createElementNS(NS,"use")
        blackArrow.setAttributeNS(xref,"href", "#myBlackArrow")
        blackArrow.setAttribute("onmouseover", "hilite(evt)")
        blackArrow.setAttribute("onmouseout", "unhilite(evt)")
        blackArrow.setAttribute("rotateAngle", rotateAngle)

        blackArrow.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
        mySVG.appendChild(blackArrow)
    }
}
//--onmouseover---
function hilite(evt)
{
    //---IE and Chrome---
    if(evt.target.correspondingUseElement)
        var target=evt.target.correspondingUseElement
    else  //---FF---
        var target=evt.target

    var rotateAngle=target.getAttribute("rotateAngle")
    target.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")scale(1,1.3)")
}
//---onmouseout--
function unhilite(evt)
{
    //---IE and Chrome---
    if(evt.target.correspondingUseElement)
        var target=evt.target.correspondingUseElement
    else  //---FF---
        var target=evt.target

    var rotateAngle=target.getAttribute("rotateAngle")
    target.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
}
</script>
</body>
</html>


在圆圈周围放置箭头
变量NS=”http://www.w3.org/2000/svg"
变量外部参照=”http://www.w3.org/1999/xlink"
var centerX=200
var centerY=200
//---围绕中心点每隔40度--
//---钮扣---
函数placeArrowsAroundCircle（）
{
对于（var k=0；k这与前面的答案类似，只是它使用导入的路径作为箭头，而不是多边形
首先，您导入的路径是humongus，因此它们对于我的400x400 svg来说太大了。
因此，我必须将它们缩小到适合我的svg的合理大小。我选择80px作为箭头的高度。为此，我必须获得导入路径的实际大小，我已将其放置在元素中。我使用getBBox（）
来执行此操作，如下所示
//--get actual size---
var bb=importedPaths.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
//---find the center point of this <g>---
var cx=bbx+.5*bbw
var cy=bby+.5*bbh

//---set desired size, i.e. scale the import--
var heightSize=80
var scale=heightSize/bbh
//---translate so it's  bottom is centered is at (0,0)
var transX=(-cx)*scale
var transY=(-cy-.5*bbh)*scale
importedPaths.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")")

/--获取实际大小---
var bb=importedpath.getBBox（）
变量bbx=bb.x
变量bby=bb.y
var bbw=bb.width
var bbh=bb.高度
//---找到这个的中心点---
变量cx=bbx+0.5*bbw
变量cy=bby+0.5*bbh
//---设置所需大小，即缩放导入--
var heightSize=80
变量刻度=高度大小/bbh
//---平移使其底部居中于（0,0）
var transX=（-cx）*标度
var transY=（-cy-.5*bbh）*标度
setAttribute（“变换”、“平移”（+transX+“”+transY+“”）比例（“+scale+“”+scale+”）

现在我有了这个尺寸，箭头的底部以（0,0）为中心，所以我可以用它来制作符号元素
//---create your symbol objects from transformed import, by placing <g> in defs--
var blackArrow=importedPaths.cloneNode(true)
blackArrow.id="myBlackArrow"
myDefs.appendChild(blackArrow)
var grayArrow=importedPaths.cloneNode(true)
grayArrow.id="myGrayArrow"
grayArrow.setAttribute("fill","silver")
myDefs.appendChild(grayArrow)

我将重新调整大小的导入复制为黑色箭头和灰色箭头，并将它们放置在
元素中。
用于存储/隐藏用于符号的元素
//---create your symbol objects from transformed import, by placing <g> in defs--
var blackArrow=importedPaths.cloneNode(true)
blackArrow.id="myBlackArrow"
myDefs.appendChild(blackArrow)
var grayArrow=importedPaths.cloneNode(true)
grayArrow.id="myGrayArrow"
grayArrow.setAttribute("fill","silver")
myDefs.appendChild(grayArrow)

/---通过放置在defs中，从转换的导入创建符号对象--
var blackArrow=importedpath.cloneNode（真）
blackArrow.id=“myBlackArrow”
myDefs.appendChild（黑色箭头）
var grayArrow=importedPaths.cloneNode（真）
grayArrow.id=“myGrayArrow”
grayArrow.setAttribute（“填充”、“银色”）
myDefs.appendChild（灰色箭头）

下面是一个html文件，您可以在其中看到这一点。我包含了一个文本区域，显示如何创建svg。（我将原始箭头保留在左上角）。注意：在IE和Chrome中工作正常，FF未完全呈现箭头组
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div  style='padding:5px;background-color:gainsboro;'>OK in:IE11/CH32, but FF23 does not fully render arrow in in circle<br /></div>
<br />
<br />
<br />
<center>
<div id=svgDiv style='width:400px;height:400px;background-color:lightgreen'>
<svg id="mySVG" width="400" y="400" overflow="visible" >
<defs id="myDefs">
</defs>
<g id="importedPaths" fill="black"><path  d="M2553.826,1137.28l-2.772-1.719l29.799,1445.434l195.02,1.004l9.765-1448.729 c0,0-63.94,42.007-113.36,42.007S2553.826,1137.28,2553.826,1137.28z" /><path d="M2451.84,1058.265c0,0,171.983,75.005,216.505,75.005s188.535-75.005,188.535-75.005l-190.691-366.037 L2451.84,1058.265z" /></g>
</svg>
</div>
<button onClick=placeArrowsAroundCircle()>Place Arrows Around Circle</button><br />
  <br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
</center>

<script id=myScript>
var NS="http://www.w3.org/2000/svg"
var xref="http://www.w3.org/1999/xlink"
//--place this at the center of this svg---
var centerX=200
var centerY=200
//---every 30 degrees around a center point--
//---button---
function placeArrowsAroundCircle()
{
    for(var k=0;k<12;k++)
    {
        var rotateAngle=k*30
        var grayArrow=document.createElementNS(NS,"use")
        grayArrow.setAttributeNS(xref,"href", "#myGrayArrow")
        grayArrow.setAttribute("onmouseover", "hilite(evt)")
        grayArrow.setAttribute("onmouseout", "unhilite(evt)")
        grayArrow.setAttribute("rotateAngle", rotateAngle)
        grayArrow.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
        mySVG.appendChild(grayArrow)
    }
    for(var k=0;k<12;k++)
    {
        var rotateAngle=k*30+15 //--offset 15 degrees---
        var blackArrow=document.createElementNS(NS,"use")
        blackArrow.setAttributeNS(xref,"href", "#myBlackArrow")
        blackArrow.setAttribute("onmouseover", "hilite(evt)")
        blackArrow.setAttribute("onmouseout", "unhilite(evt)")
        blackArrow.setAttribute("rotateAngle", rotateAngle)
        blackArrow.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
        mySVG.appendChild(blackArrow)
    }
    svgSourceValue.value=svgDiv.innerHTML
}
//--onmouseover---
function hilite(evt)
{
    //---IE and Chrome---
    if(evt.target.correspondingUseElement)
        var target=evt.target.correspondingUseElement
    else  //---FF---
        var target=evt.target

    var rotateAngle=target.getAttribute("rotateAngle")
    target.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")scale(1,1.3)")
}
//---onmouseout--
function unhilite(evt)
{
    //---IE and Chrome---
    if(evt.target.correspondingUseElement)
        var target=evt.target.correspondingUseElement
    else  //---FF---
        var target=evt.target

    var rotateAngle=target.getAttribute("rotateAngle")
    target.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
}

document.addEventListener("onload",init(),false)
//---adjust(transform) the imported paths so they fit this svg viewPort---
function init()
{
    //--get actual size---
    var bb=importedPaths.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height
    //---find the center point of this <g>---
    var cx=bbx+.5*bbw
    var cy=bby+.5*bbh

    //---set desired size, i.e. scale the import--
    var heightSize=80
    var scale=heightSize/bbh
    //---translate so it's  bottom is centered is at (0,0)
    var transX=(-cx)*scale
    var transY=(-cy-.5*bbh)*scale
    importedPaths.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")")

    //---create your symbol objects from transformed import, by placing <g> in defs--
    var blackArrow=importedPaths.cloneNode(true)
    blackArrow.id="myBlackArrow"
    myDefs.appendChild(blackArrow)
    var grayArrow=importedPaths.cloneNode(true)
    grayArrow.id="myGrayArrow"
    grayArrow.setAttribute("fill","silver")
    myDefs.appendChild(grayArrow)
    //---see textarea---
    svgSourceValue.value=svgDiv.innerHTML
}
</script>
</body>
</html>


IE11/CH32中正常，但FF23未完全渲染圆中的箭头







在圆圈周围放置箭头


SVG源代码：

变量NS=”http://www.w3.org/2000/svg"
变量外部参照=”http://www.w3.org/1999/xlink"
//--将其放置在此svg的中心---
var centerX=200
var centerY=200
//---围绕中心点每隔30度--
//---钮扣---
函数placeArrowsAroundCircle（）
{
对于（var k=0；kBy
你是指一个
标记吗？还是在多个不同的HTML
标记中嵌入单独的SVG文件？将单独的SVG文件放在一个页面上比将多个图形放在同一个SVG中要复杂得多…一些示例代码会很有用。我更新了de脚本编写和工作现在正在进行中，但我在网上找不到沿路径定位的资源，只能设置动画。使用Javascript将元素定位在路径上的某个点很容易——您可以使用路径的getPointAtLength
方法，可能与getTotalLength方法（）结合使用。但是，这不会像SVG动画那样自动旋转元素以匹配路径的切线角度。而且也没有任何简单的方法来计算角度——您需要查询多个点并使用三角法计算切线。例如，直接定位箭头可能是最容易的。但是，对于支持SVG动画，您可以使用动画语法来定位元素——但是只需设置开始和结束位置是相同的和零持续时间。但是请注意，并非所有浏览器都支持SVG动画，IE看起来很坏！嘿，谢谢大家澄清……看起来最好在CSS中考虑这样做。3.我想使用SVG ob
//---create your symbol objects from transformed import, by placing <g> in defs--
var blackArrow=importedPaths.cloneNode(true)
blackArrow.id="myBlackArrow"
myDefs.appendChild(blackArrow)
var grayArrow=importedPaths.cloneNode(true)
grayArrow.id="myGrayArrow"
grayArrow.setAttribute("fill","silver")
myDefs.appendChild(grayArrow)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div  style='padding:5px;background-color:gainsboro;'>OK in:IE11/CH32, but FF23 does not fully render arrow in in circle<br /></div>
<br />
<br />
<br />
<center>
<div id=svgDiv style='width:400px;height:400px;background-color:lightgreen'>
<svg id="mySVG" width="400" y="400" overflow="visible" >
<defs id="myDefs">
</defs>
<g id="importedPaths" fill="black"><path  d="M2553.826,1137.28l-2.772-1.719l29.799,1445.434l195.02,1.004l9.765-1448.729 c0,0-63.94,42.007-113.36,42.007S2553.826,1137.28,2553.826,1137.28z" /><path d="M2451.84,1058.265c0,0,171.983,75.005,216.505,75.005s188.535-75.005,188.535-75.005l-190.691-366.037 L2451.84,1058.265z" /></g>
</svg>
</div>
<button onClick=placeArrowsAroundCircle()>Place Arrows Around Circle</button><br />
  <br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
</center>

<script id=myScript>
var NS="http://www.w3.org/2000/svg"
var xref="http://www.w3.org/1999/xlink"
//--place this at the center of this svg---
var centerX=200
var centerY=200
//---every 30 degrees around a center point--
//---button---
function placeArrowsAroundCircle()
{
    for(var k=0;k<12;k++)
    {
        var rotateAngle=k*30
        var grayArrow=document.createElementNS(NS,"use")
        grayArrow.setAttributeNS(xref,"href", "#myGrayArrow")
        grayArrow.setAttribute("onmouseover", "hilite(evt)")
        grayArrow.setAttribute("onmouseout", "unhilite(evt)")
        grayArrow.setAttribute("rotateAngle", rotateAngle)
        grayArrow.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
        mySVG.appendChild(grayArrow)
    }
    for(var k=0;k<12;k++)
    {
        var rotateAngle=k*30+15 //--offset 15 degrees---
        var blackArrow=document.createElementNS(NS,"use")
        blackArrow.setAttributeNS(xref,"href", "#myBlackArrow")
        blackArrow.setAttribute("onmouseover", "hilite(evt)")
        blackArrow.setAttribute("onmouseout", "unhilite(evt)")
        blackArrow.setAttribute("rotateAngle", rotateAngle)
        blackArrow.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
        mySVG.appendChild(blackArrow)
    }
    svgSourceValue.value=svgDiv.innerHTML
}
//--onmouseover---
function hilite(evt)
{
    //---IE and Chrome---
    if(evt.target.correspondingUseElement)
        var target=evt.target.correspondingUseElement
    else  //---FF---
        var target=evt.target

    var rotateAngle=target.getAttribute("rotateAngle")
    target.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")scale(1,1.3)")
}
//---onmouseout--
function unhilite(evt)
{
    //---IE and Chrome---
    if(evt.target.correspondingUseElement)
        var target=evt.target.correspondingUseElement
    else  //---FF---
        var target=evt.target

    var rotateAngle=target.getAttribute("rotateAngle")
    target.setAttribute("transform","translate("+centerX+" "+centerY+")rotate("+rotateAngle+")")
}

document.addEventListener("onload",init(),false)
//---adjust(transform) the imported paths so they fit this svg viewPort---
function init()
{
    //--get actual size---
    var bb=importedPaths.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height
    //---find the center point of this <g>---
    var cx=bbx+.5*bbw
    var cy=bby+.5*bbh

    //---set desired size, i.e. scale the import--
    var heightSize=80
    var scale=heightSize/bbh
    //---translate so it's  bottom is centered is at (0,0)
    var transX=(-cx)*scale
    var transY=(-cy-.5*bbh)*scale
    importedPaths.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")")

    //---create your symbol objects from transformed import, by placing <g> in defs--
    var blackArrow=importedPaths.cloneNode(true)
    blackArrow.id="myBlackArrow"
    myDefs.appendChild(blackArrow)
    var grayArrow=importedPaths.cloneNode(true)
    grayArrow.id="myGrayArrow"
    grayArrow.setAttribute("fill","silver")
    myDefs.appendChild(grayArrow)
    //---see textarea---
    svgSourceValue.value=svgDiv.innerHTML
}
</script>
</body>
</html>