SVG ViewBox未加载

问题描述

我已经在Wordpress主题中实现了一个SVG脚本来加载特定形状，svg可以很好地加载，但是viewBox根本没有加载，这使得形状看起来令人毛骨悚然。

$svg是要加载的附件ID。

<script>
    var <?php echo $e ?> = Snap("#categories > .categories-container .<?php echo $cat ?>");
    var <?php echo $cont ?> = jQuery(".<?php echo $cat ?>").get(0);
    var <?php echo $width ?> = jQuery(".<?php echo $cat ?>").width();
    var <?php echo $height ?> = (<?php echo $width ?>) / 3;
    <?php
    if($i==1 || $i==2)
    {
        $svg = 456;
    }
    else
    {
        $svg = 456;
    }
    ?>
    var maxHeight = 0;
    
    Snap.load("<?php echo wp_get_attachment_url( $svg ) ?>",function(<?php echo 'svg' . ($i+1) ?>) {
        <?php echo $e ?>.append(<?php echo 'svg' . ($i+1) ?>);
        <?php
            if($i==1 || $i==2)
            {
               echo "var startpoints = [0,100,100];";
               echo "var endpoints = [0,50,100];";

        ?>
        <?php echo $e ?>.select(".<?php echo $cat ?> > svg").attr({viewBox:[0,100].join(',')});
        <?php echo $e ?>.select(".<?php echo $cat ?> > svg").attr({viewBox:[0,100].join(' ')});
        <?php
            }
            else
            {
                echo "var startpoints = [0,150,100];";
                echo "var endpoints = [0,100];";
            }
        ?>

        <?php echo $e ?>.select(".<?php echo $cat ?> > svg > g > g").polygon({
            points: startpoints,fill: 'url(#linear-gradient)',fillOpacity: 0.9
        });

        if (<?php echo $i ?> === 0)
            <?php echo $e ?>.select(".<?php echo $cat ?> > svg > g > g > g > image").attr("class","maxHeight");

        <?php echo $e ?>.select(".<?php echo $cat ?> > svg > g > g > g > image").attr({
            width: 150,height: 100
        });

        var maxHeight = 0;
        if (<?php echo $i ?> === 1){
            maxHeight = jQuery(".category1").height();
            jQuery(".introduction").height( maxHeight - 5 );
        }
        else if (<?php echo $i ?> === 2)
            maxHeight = jQuery(".category2").height() * 2 + 12;

        if (<?php echo $i ?> === 1 || <?php echo $i ?> === 2) {

            <?php echo $e ?>.select(".<?php echo $cat ?> > svg").attr({
                preserveAspectRatio: "none",width: "100%",height: maxHeight / 2 - 6,background: 'url(im)',backgroundRepeat: 'no-repeat',backgroundSize: "cover",backgroundPosition: "center",});

        }

        <?php echo $cont ?>.addEventListener("mouseenter",function(event) {
            <?php echo $e ?>.select(".<?php echo $cat ?> polygon").stop().animate({
                points: endpoints
            },500,mina.easein);
        });
        <?php echo $cont ?>.addEventListener("mouseleave",function(event) {
            <?php echo $e ?>.select(".<?php echo $cat ?> polygon").stop().animate({
                points: startpoints
            },mina.easein);
        });
    });

</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）