动态创建多个SVG响应

时间:2017-09-20 13:48:53

标签: javascript jquery html svg responsive

我为标题创建了svg元素。我用jQuery动态创建这些元素。我想在不同的地方使用这个元素,我希望它们能够响应。当我使用$(window).resize函数时,浏览器会卡住。

这是我的代码:



function widgetTitle() {
    $(".title-svg").each(function(i, item) {
        item = $(item);
        $(".svgWidget", item).css("width", item.width() + 17);

        var a = item.outerWidth() + 17;
        var constantPoint1 = "0.83 0.56 15.83 22.56 ";
        var constantPoint2 = " 22.56 ";
        var constantPoint3 = " 50.56";

        var changePoint = a - 2;

        var points = constantPoint1 + changePoint + constantPoint2 + changePoint + constantPoint3;
        var viewBox = "0 0 " + a + " 50.56";

        $(".svgWidget polyline", item).attr("points", points);
        $(".svgWidget", item).attr("viewBox", viewBox);
    });
}

widgetTitle();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width: 80%; position: relative;margin-bottom: 50px">
    <div class="title-svg" style="width: 100%;position: absolute;top: 10px;">
        <svg class="svgWidget" data-name="svgWidget" xmlns="http://www.w3.org/2000/svg">
				<linearGradient id="firstGradient" x="100%" y="100%">
					<stop offset="0" stop-color="yellow">
						<animate attributeName="stop-color" values="green;teal;purple;orange;red" dur="10s" from="0"
						         to="100%" repeatCount="indefinite"/>
					</stop>
					<stop offset=100 stop-color="purple">
						<animate attributeName="stop-color"
						         values="lightblue;blue;red;red;black;red;red;purple;lightblue" dur="10s" from="0%"
						         to="100%" repeatCount="indefinite"/>
					</stop>
				</linearGradient>
				<g style="opacity: 0.38" stroke="url(#firstGradient)">
					<polyline style="fill: none;stroke-miterlimit: 10;stroke-width: 1px"/>
				</g>
			</svg>
    </div>
</div>
<div style="clear:both"></div>
<div style="width: 10%: position: relative;">
    <div class="title-svg" style="width: 100%;position: absolute;top: 10px;">
        <svg class="svgWidget" data-name="svgWidget" xmlns="http://www.w3.org/2000/svg">
				<linearGradient id="firstGradient" x="100%" y="100%">
					<stop offset="0" stop-color="yellow">
						<animate attributeName="stop-color" values="green;teal;purple;orange;red" dur="10s" from="0"
						         to="100%" repeatCount="indefinite"/>
					</stop>
					<stop offset=100 stop-color="purple">
						<animate attributeName="stop-color"
						         values="lightblue;blue;red;red;black;red;red;purple;lightblue" dur="10s" from="0%"
						         to="100%" repeatCount="indefinite"/>
					</stop>
				</linearGradient>
				<g style="opacity: 0.38" stroke="url(#firstGradient)">
					<polyline style="fill: none;stroke-miterlimit: 10;stroke-width: 1px"/>
				</g>
			</svg>
    </div>
</div>
&#13;
&#13;
&#13;

正如您所看到的,它并没有使我的元素响应。

解决了这个问题的问题:

function widgetTitle() {
    $(".title-svg").each(function(i, item) {
        item = $(item);
        //$(".svgWidget", item).css("width", item.width()+17);

        var a = item.outerWidth() - 2;
        var constantPoint1 = "0.83 0.56 15.83 22.56 ";
        var constantPoint2 = " 22.56 ";
        var constantPoint3 = " 50.56";

        var changePoint = a;

        var points = constantPoint1 + changePoint + constantPoint2 + changePoint + constantPoint3;
        var viewBox = "0 0 " + a + " 50.56";

        $(".svgWidget polyline", item).attr("points", points);
        $(".svgWidget", item).attr("viewbox", viewBox);
    });
}

$(window).on('resize', function() {
    widgetTitle();
});

widgetTitle();

1 个答案:

答案 0 :(得分:1)

  1. 不要为svg元素设置绝对宽度。如果您需要不同于100%的内容,请使用%vw等相对单位。

  2. 使用jQuery,您遇到了一个问题:它是一个不支持SVG prior to version 3的XML语法的HTML框架。当您尝试设置viewBox属性时,jQuery会以小写形式将其转换为viewbox,但由于SVG区分大小写,因此无效。或者使用纯js语法,或者在版本3或更高版本中使用jQuery。

  3. 第二个svg

  4. 的外部div中存在语法错误

    &#13;
    &#13;
    function widgetTitle() {
    	$(".title-svg").each(function(i, item) {
    		item = $(item);
    		// only need this for values other than 100%
    		// $(".svgWidget", item).css("width", "100%");
    
    		var a = item.outerWidth() + 17;
    		var constantPoint1 = "0.83 0.56 15.83 22.56 ";
    		var constantPoint2 = " 22.56 ";
    		var constantPoint3 = " 50.56";
    
    		var changePoint = a-2;
    
    		var points = constantPoint1 + changePoint + constantPoint2 + changePoint + constantPoint3;
    		var viewBox = "0 0 " + a + " 50.56";
    
    		$(".svgWidget polyline", item).attr("points", points);
    		$(".svgWidget", item).get(0).setAttribute("viewBox", viewBox);
    	});
    }
    
    widgetTitle();
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div style="width: 80%; position: relative;margin-bottom: 50px">
        <div class="title-svg" style="width: 100%;position: absolute;top: 10px;">
    			<svg class="svgWidget" data-name="svgWidget" xmlns="http://www.w3.org/2000/svg">
    				<linearGradient id="firstGradient" x="100%" y="100%">
    					<stop offset="0" stop-color="yellow">
    						<animate attributeName="stop-color" values="green;teal;purple;orange;red" dur="10s" from="0"
    						         to="100%" repeatCount="indefinite"/>
    					</stop>
    					<stop offset=100 stop-color="purple">
    						<animate attributeName="stop-color"
    						         values="lightblue;blue;red;red;black;red;red;purple;lightblue" dur="10s" from="0%"
    						         to="100%" repeatCount="indefinite"/>
    					</stop>
    				</linearGradient>
    				<g style="opacity: 0.38" stroke="url(#firstGradient)">
    					<polyline style="fill: none;stroke-miterlimit: 10;stroke-width: 1px"/>
    				</g>
    			</svg>
    		</div>
    </div>
    <div style="clear:both"></div>
    <div style="width: 10%; position: relative;">
        <div class="title-svg" style="width: 100%;position: absolute;top: 10px;">
    			<svg class="svgWidget" data-name="svgWidget" xmlns="http://www.w3.org/2000/svg">
    				<linearGradient id="firstGradient" x="100%" y="100%">
    					<stop offset="0" stop-color="yellow">
    						<animate attributeName="stop-color" values="green;teal;purple;orange;red" dur="10s" from="0"
    						         to="100%" repeatCount="indefinite"/>
    					</stop>
    					<stop offset=100 stop-color="purple">
    						<animate attributeName="stop-color"
    						         values="lightblue;blue;red;red;black;red;red;purple;lightblue" dur="10s" from="0%"
    						         to="100%" repeatCount="indefinite"/>
    					</stop>
    				</linearGradient>
    				<g style="opacity: 0.38" stroke="url(#firstGradient)">
    					<polyline style="fill: none;stroke-miterlimit: 10;stroke-width: 1px"/>
    				</g>
    			</svg>
    		</div>
    </div>
    &#13;
    &#13;
    &#13;

    我能告诉你的是你的垂直定位是否符合你的意图。 .title-svg div是绝对定位的,因此外部div的高度为零。因此<div style="clear:both"></div>无效。