0

我有以下 SVG 文件。保存为 SVG 时渲染得很好,但是当我使用 raphael 使用教程绘制 svg 时,它不会显示。我认为这是因为规模或尺寸问题,但不知道如何解决。

 <?xml version="1.0" encoding="iso-8859-1"?>
    <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="79.553674 -31.027755 9.149489 5.259533">
    <g id="Cluster_region" style="display:inline;fill-rule:evenodd">
    <desc>Layer Cluster_region</desc>
    <path id="1" d="M83.502064,-28.809384 l -0.000769,-0.002363 0.0,0.012758 0.026895,-0.001343 0.04841,0.038272 -0.015368,0.026186 -0.021516,0.047001 0.023821,0.034243 0.016137,0.058416 0.055326,0.010743 0.019211,0.014771 0.011526,-0.0047 0.030737,-0.055729
     0.031505,-0.044987 0.015368,-0.015443 0.034579,-0.007386 0.01921,-0.016786 0.05379,-0.013428 0.027663,-0.019472 0.029968,-0.036258 0.024589,-0.003357 0.0,-0.038944 0.016906,-0.012086 0.021515,0.0 0.043032,0.03693 0.005379,-0.015444 0.022284,-0.008057
     0.016136,-0.024172 0.021516,-0.006043 -0.002305,-0.024171 0.017674,-0.010072 0.031505,-0.002014 0.031505,0.008728 0.026896,-0.020143 0.02382,-0.006714 0.037652,-0.116159 -0.015368,-0.015443 -0.037652,0.002685 -0.015369,-0.027529 0.013064,-0.046655
     -0.047642,-0.069791 0.039958,-0.046975 -0.067622,0.004026 -0.00922,-0.052343 -0.093748,0.002684 -0.03842,-0.033553 -0.067622,-0.010737 -0.073768,0.04429 -0.007684,0.042949 -0.099894,0.002684 -0.049178,0.036238 0.014599,0.032178 -0.00999,0.049204
     -0.041494,0.010785 -0.001537,0.014154 -0.006147,0.097734 -0.053021,0.047181 -0.063779,0.062011 0.005379,0.031679 -0.025358,0.008088 0.006916,0.031679 Z" style="fill:white;stroke:black;stroke-width:0.014477;"/>
    </g>

使用 Raphael:路径文件

  <html>
<head>

   <script src="http://raphaeljs.com/raphael.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

   <script>
    var paths = {
        tp : {
              name : 'tp',
              path : 'M83.267697,-28.73143 l 0.047641,-0.012755 0.049948,0.006042 0.0,-0.018798 0.109115,-0.027525 -0.002306,-0.048336 0.023822,-0.040951 0.089136,-0.104058 0.023821,-0.012755 0.0,-0.111442 0.010759,-0.004384 0.036884,-0.040155 -0.113724,-0.032124  -0.036884,-0.04551 -0.063012,-0.056217 -0.023051,-0.065586 -0.089137,-0.137866 -0.050716,0.004015 -0.027664,-0.08031 -0.03842,-0.013385 -0.067618,-0.022047 -0.086064,0.0 -0.064544,-0.047786 -0.156764,-0.015929 -0.165976,-0.082298 -0.006148,-0.076989  -0.055328,0.010619 0.0,-0.037167 -0.064544,-0.090263 -0.04918,0.010619 -0.172124,-0.090262 -0.184424,-0.042477 0.003076,-0.108846 -0.05379,-0.063715 0.027664,-0.078981 -0.036116,-0.039822 -0.064548,0.05907 -0.15061,-0.080308 -0.0584,-0.009292  -0.067621,0.003318 -0.016905,-0.029866 -0.092978,-0.031858 -0.007684,0.03584 -0.051485,-0.019911 -0.003842,0.047787 -0.059168,0.018583 -0.034579,-0.033849 -0.029967,-0.018583 -0.027664,-0.002655 0.021516,0.031858 -0.026126,0.016592 0.006915,0.026651  0.023053,0.021305 -0.018442,0.089215 -0.041495,0.054595 -0.079915,0.037284 0.003049,0.075298 0.000025,-0.000031 0.0,-0.008286 0.000767,0.007312 -0.000767,0.000974 0.0,0.000633 -0.000025,-0.000602 -0.010733,0.01362 0.033042,0.013959 0.04841,0.003989  0.082989,0.009306 0.023053,0.039884 -0.012295,0.027254 -0.000768,0.05052 0.027663,0.005318 0.012294,-0.026589 0.030737,-0.019942 0.0584,0.0 0.003073,-0.009306 0.076075,-0.001994 0.019209,0.001994 0.026895,0.022607 0.089136,0.012032 -0.016904,0.110958  -0.038421,0.016042 -0.051485,0.107619 0.016138,0.05645 0.078377,0.022177 0.009221,0.045026 -0.023052,0.036961 0.026894,0.035618 -0.003073,0.096099 -0.042263,0.008064 -0.006916,0.045026 -0.057631,0.022177 -0.066084,-0.005377 -0.000769,-0.034273  -0.017674,-0.01008 -0.041494,0.015456 -0.017674,0.001344 -0.010757,0.016801 -0.063779,0.057123 0.028431,0.028225 -0.019978,0.022848 0.009988,0.058466 0.026896,-0.004032 0.013063,0.022849 0.04841,-0.003361 0.000769,0.021505 -0.017674,0.069219  0.096052,-0.004032 0.037653,0.020832 0.073768,0.011425 0.046105,0.035617 0.051484,-0.00336 0.059937,0.009408 0.01921,-0.01344 0.034579,-0.040994 0.035347,0.001344 0.029201,0.052418 0.029967,0.008065 0.040726,-0.053762 0.114495,-0.09946 0.039189,-0.00336  0.139852,0.028225 -0.022284,0.094755 0.049179,0.007393 0.066084,-0.020161 0.149072,0.056222 0.0438,0.052364 -0.005379,0.052364 0.031505,0.0 0.026127,0.033567 0.022284,0.000671 0.152915,-0.01007 0.042264,0.027525 0.099125,0.020812 0.037652,0.032224  0.030737,-0.002014 0.061474,0.023497 0.026126,-0.015441 0.034579,0.022154 Z'
        }

    }
   </script>

   <script>
    window.onload = function(){   
        var r = Raphael('map', 1200, 820),
                    // create a canvas object on which to draw our paths
            attributes = {
                fill: '#fff',
                stroke: '#3899E6',
                'stroke-width': 1,
                'stroke-linejoin': 'round'
            },
            // create 'attributes' object with parameters
            arr = new Array();

            for (var country in paths) {
                var obj = r.path(paths[country].path); 
                obj.attr(attributes);
            }
    }
   </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

但是,如果我使用以下路径,它将起作用:

M83.502064,-28.809384 l -0.000769,-0.002363 0.0,0.012758 0.026895,-0.001343 0.04841,0.038272 -0.015368,0.026186 -0.021516,0.047001 0.023821,0.034243 0.016137,0.058416 0.055326,0.010743 0.019211,0.014771 0.011526,-0.0047 0.030737,-0.055729  0.031505,-0.044987 0.015368,-0.015443 0.034579,-0.007386 0.01921,-0.016786 0.05379,-0.013428 0.027663,-0.019472 0.029968,-0.036258 0.024589,-0.003357 0.0,-0.038944 0.016906,-0.012086 0.021515,0.0 0.043032,0.03693 0.005379,-0.015444 0.022284,-0.008057  0.016136,-0.024172 0.021516,-0.006043 -0.002305,-0.024171 0.017674,-0.010072 0.031505,-0.002014 0.031505,0.008728 0.026896,-0.020143 0.02382,-0.006714 0.037652,-0.116159 -0.015368,-0.015443 -0.037652,0.002685 -0.015369,-0.027529 0.013064,-0.046655  -0.047642,-0.069791 0.039958,-0.046975 -0.067622,0.004026 -0.00922,-0.052343 -0.093748,0.002684 -0.03842,-0.033553 -0.067622,-0.010737 -0.073768,0.04429 -0.007684,0.042949 -0.099894,0.002684 -0.049178,0.036238 0.014599,0.032178 -0.00999,0.049204  -0.041494,0.010785 -0.001537,0.014154 -0.006147,0.097734 -0.053021,0.047181 -0.063779,0.062011 0.005379,0.031679 -0.025358,0.008088 0.006916,0.031679 Z
4

1 回答 1

2

您需要Paper.setViewBox()在 SVG 中进行设置。
它的作用类似于平移和缩放整个视图。否则你的路径只是越界,你看不到它。


为您提供更多教程/进一步阅读

于 2012-07-11T08:55:16.523 回答