Question

我有一个svg文件，我试图在Raphael中呈现。问题在于转型。我无法获得扩展和转换的路径。有人能告诉我，我做错了吗？

这是我在svg中的原始代码：

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="1000.000000pt" height="618.000000pt" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify" onload="javascript: init(evt);">
<g transform="translate(0.000000,309.000000) scale(0.100000,-0.100000)" fill="#cc6633" stroke="none">
<path d="M410 1078 c0 -20 -8 -32 -27 -42 -16 -9 -54 -39 -86 -68 l-58 -53 67 -75 c67 -76 78 -83 217 -140 58 -24 77 -37 77 -51 0 -11 -7 -19 -17 -19 -15 0 -16 -2 -3 -10 21 -13 53 -12 73 3 19 13 46 110 47 165 0 17 5 32 11 32 27 0 50 44 47 89 -3 39 -7 48 -30 59 -38 18 -35 39 9 80 30 27 35 35 22 42 -8 5 -90 10 -182 12 l-167 3 0 -27z" id="Allegheny" label="Allegheny" >
</path>
</g>
</svg>

这是我的拉斐尔代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Raphaël </title>
        <style>
            #canvas {

            }
            #paper {

            }
            #Allegheny {


            }
        </style>
        <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var R = Raphael("paper", 1000, 800);
            var attr = {
                fill: "#ccc",
                stroke: "#333",
                "stroke-width": 1,
                "stroke-linejoin": "round"


            };
            var pa = {};
            pa.Allegheny = R.path("M410 1078 c0 -20 -8 -32 -27 -42 -16 -9 -54 -39 -86 -68 l-58 -53 67 -75 c67 -76 78 -83 217 -140 58 -24 77 -37 77 -51 0 -11 -7 -19 -17 -19 -15 0 -16 -2 -3 -10 21 -13 53 -12 73 3 19 13 46 110 47 165 0 17 5 32 11 32 27 0 50 44 47 89 -3 39 -7 48 -30 59 -38 18 -35 39 9 80 30 27 35 35 22 42 -8 5 -90 10 -182 12 l-167 3 0 -27z").attr(attr);
            R.setViewBox(0, 0, 1024, 768, false);
        R.transform(T0,309);
        R.transform(s0.1);

        };
        </script>
    </head>
    <body>
        <div id="canvas">
            <div id="paper"></div>
            <div id="Allegheny"></div>
        </div>

    </body>
</html>

您可以看到http://blogs.sites.post-gazette.com/demo/index.html

Answer 1

有几件事：

在transform()。
您可以在一次通话中包含所有转化（请参阅API）。
您可能想要转换pa.Allegheny，而不是R

所以：

pa.Allegheny.transform("T0,309s0.1");

从svg到拉斐尔

1 个答案: