Question

我已成功将SVG元素加载到我的网页上并正确显示。问题是我需要它在我的页面上的某个位置。由于我没有通过html加载它，我无法使用css分配div和修改位置。

我已经了解了Snap.svg API参考和一些示例。它指出我尝试Element.attr。

我也知道使用Element.animate({transform: 'tx,y'});，但我正在寻找加载时初始放置的解决方案。

以下是我的代码以及我尝试过的内容：

window.onload = function() {
    var s = Snap(800,800);
    Snap.load( "/svg/RedBar-01.svg", function( f ) {
        s.append( f ); //add the loaded svg fragment into the DOM
        var element = s.select('#line');
        element.animate({
            fill: "purple",
        }, 1000);

        element.attr({
            x:100,   //Setting this 
            y:500    // or this doesnt seem to change the position at all
        });
        //Find out how to position this element..
    });

有没有人知道如何为我的svg元素指定（x，y）位置？感谢您提供的任何帮助。

以下是svg文件代码，以便更清楚我正在使用的内容：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="redBar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 113.9 3.7" style="enable-background:new 0 0 113.9 3.7;" xml:space="preserve">
<style type="text/css">

</style>
<g id="line">

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1.239177e-04" y1="29.3381" x2="113.9399" y2="29.3381" gradientTransform="matrix(1 0 0 1.3293 0 -37.1699)">
        <stop  offset="1.075269e-02" style="stop-color:#EC1C24"/>
        <stop  offset="0.1548" style="stop-color:#EC2026"/>
        <stop  offset="0.2961" style="stop-color:#ED2C2A"/>
        <stop  offset="0.436" style="stop-color:#EE3F32"/>
        <stop  offset="0.5" style="stop-color:#EF4B37"/>
        <stop  offset="0.5483" style="stop-color:#EE4334"/>
        <stop  offset="0.7058" style="stop-color:#ED2D2B"/>
        <stop  offset="0.8586" style="stop-color:#EC2026"/>
        <stop  offset="1" style="stop-color:#EC1C24"/>
    </linearGradient>
    <path class="st0" d="M113,3.7H1c-0.5,0-1-0.4-1-1L0,1c0-0.5,0.4-1,1-1l112,0c0.5,0,1,0.4,1,1v1.7C113.9,3.2,113.5,3.7,113,3.7z"/>
</g>
</svg>

在使用Snap加载时为（s，y）位置分配（x，y）位置

0 个答案: