[英]Making dynamically created multiple SVG responsive
I've created svg elements for titles. 我已经为标题创建了svg元素。 I dynamically create these elements with jQuery. 我使用jQuery动态创建这些元素。 I want to use this element in different places and I want them to be responsive. 我想在不同的地方使用此元素,并且希望他们能够响应。 When I use $(window).resize function, browser gets stuck. 当我使用$(window).resize函数时,浏览器卡住了。
Here is my code: 这是我的代码:
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>
As you can see, it did not make my elements responsive. 如您所见,它没有使我的元素具有响应能力。
SOLVED THE PROBLEM WITH THIS CODE: 使用以下代码解决了问题:
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();
Do not set an absolute width for the svg elements. 不要为svg元素设置绝对宽度。 If you need something different than 100%, use relative units like %
or vw
. 如果您需要的不是100%,请使用相对单位,例如%
或vw
。
With jQuery, you have a problem: it is a HTML framework that does not support XML syntax for SVG prior to version 3 . 使用jQuery,您会遇到一个问题:这是一个HTML框架,不支持版本3之前的SVG的XML语法。 While you try to set the viewBox
attribute, jQuery converts that to viewbox
in lowercase, which does not work since SVG is case-sensitive. 当您尝试设置viewBox
属性时,jQuery会将其转换为小写形式的viewbox
,因为SVG区分大小写,因此该方法不起作用。 Either use the pure js syntax instead, or use jQuery in version 3 or later. 请改用纯js语法,或者在版本3或更高版本中使用jQuery。
There is syntax error in the outer div for the second svg 第二个svg的外部div中存在语法错误
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();
<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>
What I can't tell you is whether your vertical positioning is what you intended. 我无法告诉您的是您的垂直位置是否符合您的预期。 The .title-svg
divs are absolutely positioned, so the outer divs have a height of zero. .title-svg
div绝对定位,因此外部div的高度为零。 As a consequence the <div style="clear:both"></div>
has no effect. 因此, <div style="clear:both"></div>
无效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.