可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
我需要在本机反应中设计这个底部选项卡，我怎样才能实现这一点。 我正在尝试使用 React Native svg 来做到这一点，但没有得到结果。 如果可能的话，还建议一个解决方案，使其动态...
使用 CSS 将 SVG 图标的路径动画化以从中心顺时针旋转
我正在尝试旋转/旋转此 SVG 的内部路径，使其顺时针旋转。 是否有任何好的资源可以展示 CSS 可用的不同类型的动画方法？ 现在...
是否可以有一条带有 1 个圆端（线帽）和 1 个对接端或方端的 SVG 线。我认为这个问题不需要更具描述性，但这行文字是 Stackove 要求的......
如何生成动态 SVG 路径，其中点坐标固定到 HTML 元素并且项目遵循路径？
我的目标是创建这样的东西： 最终结果草图 黄色框代表数量是动态的div。我需要生成一条贝塞尔曲线，其循环固定在图像下方...
我正在 R 中创建几个具有不同纵横比的绘图，这些绘图旨在稍后在 Latex 中使用。 我有类似这样的情节： 库（ggplot2） 图书馆（SF） 地图 <- st_sf(geometry = st_sfc(
SVGO 是目前唯一积极开发的 SVG 文件优化器/压缩器，尽管 SVG 文件是网络上最常见的矢量图像文件类型，但很少针对带宽和...
我正在尝试制作新芽生长的动画。计划是叶子应该沿着茎的路径移动（用虚线表示）。现在这已经可以工作了（经过一些尝试和错误）。嗬...
SVG 图案填充适用于 <rect>，但在 <polygon>
我正在使用包含填充的 SVG，该填充在应用于 时可以正确显示，但是当我将相同的图案应用于 时，它会缩小到极小...
defs/use 中的foreignObject 中的画布不显示
我想使用JavaScript在嵌入svg（在html5页面中）的html5画布上绘图。如果这样做的话，在“cvs”上绘图就可以很好地工作： 我想使用 JavaScript 在嵌入 svg 的 html5 画布上绘制（在 html5 页面中）。如果这样做的话，在“cvs”上绘图就可以很好地工作： <svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024"> <foreignObject x="0" y="0" width="512" height="512"> <body xmlns="http://www.w3.org/1999/xhtml"> <canvas id="cvs" width="512" height="512"></canvas> </body> </foreignObject> </svg> 但如果使用画布完成并在 use 标签中引用则不会。绘图根本就没有出现。在 Safari 中检查该元素告诉我，use 元素的尺寸为 NaN x NaN； Firebug 说 0x0。 <svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024"> <defs> <foreignObject id="circles" x="0" y="0" width="512" height="512"> <body xmlns="http://www.w3.org/1999/xhtml"> <canvas id="cvs" width="512" height="512"></canvas> </body> </foreignObject> </defs> <use x="0" y="0" xlink:href="#circles"></use> </svg> 这是一个错误吗？预期的行为？我只是不明白如何使用foreignObject（很可能）吗？ SVG 1.1 规范不允许使用直接指向foreignObject 元素。 仅限“svg”、“符号”、“g”、图形元素或其他“使用”。 因此，对于 SVG 1.1，您必须指向具有 <g> 元素作为子元素的 <svg> 或 <foreignObject> 元素。 SVG 2 放宽了这一要求，现在大多数浏览器可能都允许这样做。 Firefox 当然可以。
使用 CSS，我可以修改除了 ChoiceBox 的大小之外的所有内容 上下文菜单对象。背景颜色、突出显示颜色、窗口中的位置以及复选标记颜色。顶部
如果我有一个不是图像而是定义集合的 svg 文件，我可以将其称为外部文件吗？
我有一长串定义字符形状的路径。 或多或少有128条路径。 路径在 列表中定义，稍后使用 元素进行引用。 我...
如何正确地将 prop“title”传递给 svgr React 组件？
我需要将 prop title 传递给返回 svg 标签的 React 组件。 我的 webpack @svgr/webpack 加载器设置： { 加载器：'@svgr/webpack'， 选项：{ memo: true, titleProp: true }...
我正在寻求有关创建代码的最简单方法的建议，该代码将生成具有透明度的PNG图像轮廓的路径（SVG）。它可以是 Python 脚本，也可以是命令行命令（...
在 Ubuntu 上使用 cairosvg 使用 Python 将带有自定义字体的 SVG 转换为 PNG
我需要将带有自定义字体的 SVG 转换为 PNG，为此我使用以下 Python 代码。 导入 cairosvg png = cairosvg.svg2png(bytestring=svg_data) 该代码在我的本地计算机上运行良好（
我对 svg 动画了解不多，但我从 a) 点到 b) 点进行了半次旋转动画，持续了 4 秒，我希望旋转之后从 b) 点回到 a) 点...
我尝试使用以下 HTML 代码填充 SVG 中路径元素的内部： 我在 SO 上看过几篇相关帖子，但发现它们难以理解且没有帮助。做什么...
如何避免svgs的foreignObjects内部元素的缩放？
我想使用 svg 作为 div 元素的容器，该元素应包含多个元素。目前它看起来像这样： 我想使用 svg 作为 div 元素的容器，该元素应包含多个元素。目前看起来像这样： <body> <svg width="100%" height="100%" viewBox="0 0 45 90" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <path d="M45.02,17.449l0,-5.837l-0.324,0c0,-3.841 0,-6.21 0,-6.344c0,-0.786 0.105,-3.078 -2.657,-3.659c-5.996,-1.263 -19.539,-1.352 -19.539,-1.352c0,0 -13.543,0.089 -19.539,1.352c-2.762,0.58 -2.657,2.873 -2.657,3.659c0,0.192 0,4.987 0,12.133l-0.324,0l0,14.537l0.324,0c0,22.9 0,52.313 0,52.794c0,0.786 -0.105,3.079 2.656,3.66c5.997,1.262 19.54,1.351 19.54,1.351c0,0 13.542,-0.089 19.539,-1.351c2.762,-0.581 2.657,-2.874 2.657,-3.66c0,-0.594 0,-45.159 0,-67.283l0.324,0Zm-22.52,-13.778c0.535,0 0.969,0.434 0.969,0.969c0,0.536 -0.434,0.97 -0.969,0.97c-0.535,0 -0.969,-0.435 -0.969,-0.97c0,-0.536 0.434,-0.969 0.969,-0.969Zm20.262,75.595l-40.525,0l0,-71.234l40.524,0l0,71.234l0.001,0Z" style="fill-rule:nonzero;"></path> <foreignObject x="2.238" y="8.019" width="40" height="71"> <div id="screen"> I'm a very long text. Why am I so big? </div> </foreignObject> </svg> </body> CSS html, body{ width: 100%; height: 100%; } #screen{ background: green; overflow: scroll; width: 100%; height: 100%; font-size: 10px; } JSFiddle 我的问题是 screen-div 内的所有元素都比预期大得多。例如查看滚动条或文本大小。 我假设 foreignObject 的内容与 svg 的缩放比例相同。有办法避免这种情况吗？我可以将 foreignObject 内的 div 标准化为不缩放吗？ svg 是名词项目中 Martin Jordan 的“智能手机” 我能想到的唯一解决方案是使用 JavaScript 根据 viewBox 尺寸与外部 foreignObject 的 offsetWidth 和 offsetHeight 来动态调整 <svg> 的大小和反比例。 例如，在这个演示中，我碰巧将 SVG 的大小硬编码为 viewBox 尺寸的四倍。为了解决这个问题，我将 foreignObject 设置为原来的四倍，然后将其缩小到四分之一： <foreignObject width="164" height="288" transform="translate(2,8) scale(0.25,0.25)"> https://jsfiddle.net/7ttps7a7/3/ 一个好的通用解决方案是在任何 foreignObject 上的自定义命名空间中放置一个额外的属性，然后加载一个 JavaScript 库来查找此类元素并动态调整它们（并随着 SVG 大小的变化而调整它们）。 请注意，比较 offsetWidth（和高度）与 viewBox 宽度（和高度）需要考虑 SVG 上 preserveAspectRatio 属性的值是否精确。 编辑：我创建了一个小型库来执行此操作 库：http://phrogz.net/SVG/fixed-size-foreignObject.js 演示：http://phrogz.net/SVG/fixed-size-foreignObject.html 使用方法： 将库包含在您的 HTML 或 SVG 页面中。 请下载并托管在您自己的网站上；我不是 CDN。 请务必使用 x 和 y 属性来放置 <foreignObject>，并使用 width 和 height 值来调整其大小。 使用以下其中一项： fixedSizeForeignObject( someForeignObjectElement ); fixedSizeForeignObjects( arrayOfForeignObjectElements ); 工作原理： 当一个foreignObject被添加到元素列表中以保持调整大小时，它的原始x、y、宽度、高度值将被记录。拥有foreignObject的SVG元素被添加到要观看的SVG元素列表中。 当窗口调整大小时，会触发代码：(a) 计算每个 SVG 的比例（实际像素与 viewBox 大小），然后 (b) 对于注册的每个foreignObject，它会将宽度/高度调整为正确，然后缩放元素向下以适合原来的位置。 在我的网站关闭（不太可能）的情况下，我将复制/粘贴该库： (function(win){ const svgs, els=[]; win.fixedSizeForeignObjects = function fixedSizeForeignObjects(els) { els.forEach( fixedSizeForeignObject ); } win.fixedSizeForeignObject = function fixedSizeForeignObject(el) { if (!svgs) { svgs = []; win.addEventListener('resize',resizeSVGs,false) } let svg=el.ownerSVGElement, found=false; for (let i=svgs.length;i--;) if (svgs[i]===svg) found=true; if (!found) svgs.push(svg); let info = { el:el, svg:svg, w:el.getAttribute('width')*1, h:el.getAttribute('height')*1, x:el.getAttribute('x')*1, y:el.getAttribute('y')*1 }; els.push(info); el.removeAttribute('x'); el.removeAttribute('y'); calculateSVGScale(svg); fixScale(info); } function resizeSVGs(evt) { svgs.forEach(calculateSVGScale); els.forEach(fixScale); } function calculateSVGScale(svg) { let w1=svg.viewBox.animVal.width, h1=svg.viewBox.animVal.height; if (!w1 && !h1) svg.scaleRatios = [1,1]; // No viewBox else { let info = win.getComputedStyle(svg); let w2=parseFloat(info.width), h2=parseFloat(info.height); let par=svg.preserveAspectRatio.animVal; if (par.align===SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE) { svg.scaleRatios = [w2/w1, h2/h1]; } else { let meet = par.meetOrSlice === SVGPreserveAspectRatio.SVG_MEETORSLICE_MEET; let ratio = (w1/h1 > w2/h2) != meet ? h2/h1 : w2/w1; svg.scaleRatios = [ratio, ratio]; } } } function fixScale(info) { let s = info.svg.scaleRatios; info.el.setAttribute('width', info.w*s[0]); info.el.setAttribute('height',info.h*s[1]); info.el.setAttribute('transform','translate('+info.x+','+info.y+') scale('+1/s[0]+','+1/s[1]+')'); } })(window); 您可以使用缩放比例来取消缩放foreignObject并调整字体大小。 缩放比例是通过浏览器中 svg 的有效大小除以 viewbox 给定的 svg 内部宽度得到的。 这是基于第一个示例的示例：https://jsfiddle.net/bwvrhsu6/43/ 代码可能如下所示： const svg: SVGSVGElement = document.getElementsByTagName('svg')[0]; const scalingRatio = svg.clientWidth / svg.viewBox.baseVal.width; const foreignObject: SVGForeignObjectElement = svg.getElementsByTagName('foreignObject')[0]; foreignObject.style.zoom = scalingRatio.toString(); const fontSize= getComputedStyle(foreignObject).fontSize; fontNumber = Number(fontSize.replace('px', '')); foreignObject.style.fontSize = (fontNumber / scalingRatio).toString();
您能帮我在svg中实现以下效果吗？ svg 由网络应用程序动态生成，包含各种颜色的形状。当用户选择 svg 中的一个区域时，所有...
我试图用css3来实现这一点，我尝试使用带有百分比值的边框半径，但它并不总是相同的，我总是有一个圆角，并且边框将开始在cor上消失...