- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经为标题创建了 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();
最佳答案
不要为 svg 元素设置绝对宽度。如果您需要不同于 100% 的值,请使用相对单位,例如 %
或vw
.
使用 jQuery,您会遇到一个问题:它是一个 HTML 框架,不支持 SVG 的 XML 语法 prior to version 3 。当您尝试设置viewBox
时属性,jQuery 将其转换为 viewbox
小写,这不起作用,因为 SVG 区分大小写。要么使用纯 js 语法,要么使用版本 3 或更高版本的 jQuery。
第二个 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/
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
有两个 SVG 元素( SVG1 和 SVG2 ),其中 SVG1 是一个包含各种元素的大区域,会不时添加、删除和重新定位。另一方面,SVG2 需要用作 图标化表示(小) SVG1 的版本,非常小,但
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。 但是,这种方法似乎不适用
我正在尝试使用 Flutter SVG 依赖项,我将 svg 放入 Assets 中,在 pubspec.yaml 中设置,并在我的小部件中设置,但是,使用黑色容器加载 svg 我已经尝试过更改 sv
为什么这样的演示:http://jsbin.com/ejorus/2/edit,将元素嵌套在另一个元素内? JS
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形 每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
我试图将 play svg 居中放置在 SVG 圆圈的中间,但似乎不知道该怎么做。 垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
是否可以使用一个 SVG 形状作为另一个形状的填充? 最佳答案 您想使用 SVG Pattern .见 this example : 注意
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
我使用 require 的 SVG 没有显示。 在我的终端中,svg Assets 被发出并且路径在我的 html 中正确设置。 但是,SVG 不会显示,而其他格式(如 jpg 或 png)可以显示
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径,我想用公式组合它们:(1*2) + (3*4),即路径 1 和路径 2 应该使用乘法模式混合,类似地路径 3 和路径 4 应该使用混合相
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试,我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成,
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。 问题是什么?为什么
使用联合 js 在 svg 中创建了一个文本区域。但是,我无法在文本区域中输入任何文本。如何使文本区域可编辑? 代码: var graph = new joint.dia.Graph;
您可以不受限制地停止和重复动画,但如果您重新启动一个不确定的动画,它将失去其累积值并从初始值开始。 也许我应该用一个例子来澄清;拿这个动画: 如果我停止此动画,并开始影响同一对象旋转的不同动画(
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中),在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异? 我正在考虑将某种动画从一张图片变成一张完全不同
logo的turtlegraphics的svg路径中是否有等价物? 而不是硬编码的 x 和 y 坐标,这也迫使我在移动更相对的“增量”方法时调整控制点。 我的解决方案应该适用于 FOCS(Firefo
目前正在使用 SVG 元素与一堆 元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题,但没有任何效果。这是一个带有针迹的圆圈的代码:
我是一名优秀的程序员,十分优秀!