gpt4 book ai didi

javascript - 使动态创建的多个 SVG 响应式

转载 作者:行者123 更新时间:2023-12-03 03:26:01 24 4
gpt4 key购买 nike

我已经为标题创建了 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>

如您所见,它没有使我的元素响应。

<小时/>

使用此代码解决了问题:

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. 不要为 svg 元素设置绝对宽度。如果您需要不同于 100% 的值,请使用相对单位,例如 %vw .

  2. 使用 jQuery,您会遇到一个问题:它是一个 HTML 框架,不支持 SVG 的 XML 语法 prior to version 3 。当您尝试设置viewBox时属性,jQuery 将其转换为 viewbox小写,这不起作用,因为 SVG 区分大小写。要么使用纯 js 语法,要么使用版本 3 或更高版本的 jQuery。

  3. 第二个 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>

我无法告诉你的是你的垂直定位是否是你想要的。 .title-svg div 是绝对定位的,因此外部 div 的高度为零。因此 <div style="clear:both"></div>没有效果。

关于javascript - 使动态创建的多个 SVG 响应式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46323900/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com