Javascript 使动态创建的多个SVG响应

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

这是我的密码：

函数widgetTitle（）{
$（“.title svg”）。每个（功能（i，项）{
项目=$（项目）；
$（.svgWidget），item.css（“宽度”，item.width（）+17）；
var a=项.外径（）+17；
var constantPoint1=“0.83 0.56 15.83 22.56”；
var constantPoint2=“22.56”；
var constantPoint3=“50.56”；
var转换点=a-2；
变量点=恒定点1+变化点+恒定点2+变化点+恒定点3；
var viewBox=“0 0”+a+“50.56”；
$（“.svgWidget多段线”，item）.attr（“点”，点）；
$（“.svgWidget”，item）.attr（“viewBox”，viewBox）；
});
}
widgetTitle（）


不要为svg元素设置绝对宽度。如果您需要的不是100%，请使用相对单位，如
%
或
vw

使用jQuery，您会遇到一个问题：它是一个不支持SVG XML语法的HTML框架。当您尝试设置
viewBox
属性时，jQuery会将其转换为小写的
viewBox
，因为SVG区分大小写，所以这不起作用。或者改用纯js语法，或者在版本3或更高版本中使用jQuery

第二个svg的外部div中存在语法错误


函数widgetTitle（）{
$（“.title svg”）。每个（功能（i，项）{
项目=$（项目）；
//仅当值不是100%时才需要此选项
//$（.svgWidget），item.css（“宽度”，“100%”）；
var a=项.外径（）+17；
var constantPoint1=“0.83 0.56 15.83 22.56”；
var constantPoint2=“22.56”；
var constantPoint3=“50.56”；
var转换点=a-2；
变量点=恒定点1+变化点+恒定点2+变化点+恒定点3；
var viewBox=“0 0”+a+“50.56”；
$（“.svgWidget多段线”，item）.attr（“点”，点）；
$（“.svgWidget”，item）.get（0）.setAttribute（“viewBox”，viewBox）；
});
}
widgetTitle（）

我有点困惑，为什么要尝试使用JQuery而不是CSS来管理它？这不起作用吗？因为我想使用带有动画背景的svg。
attr（“viewbox”，viewbox）
应该是
attr（“viewbox”，viewbox）
@paulebeau，正如答案中所述，jQuery v2将
.attr（“viewbox”，viewbox）
转换为小写。要设置有效属性，请使用jQuery v3或
.get（0）。必须使用setAttribute（“viewBox”，viewBox）
。谢谢您的回答。我会考虑这些建议。我想你误解了我想做的事。我只是希望SVG能够响应。我想为所有元素运行函数，而不仅仅是一个元素，这意味着每次调整大小时都要重新运行函数
widgetTitle（）
，不是吗？（不要忘记踩油门或踩油门。）