svg 相关问题

我想使用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 当然可以。

svg html5-canvas

回答 1 投票 0

如何修改JavaFX中的上下文菜单尺寸？

使用 CSS，我可以修改除了 ChoiceBox 的大小之外的所有内容上下文菜单对象。背景颜色、突出显示颜色、窗口中的位置以及复选标记颜色。顶部

java css svg javafx

回答 1 投票 0

如果我有一个不是图像而是定义集合的 svg 文件，我可以将其称为外部文件吗？

我有一长串定义字符形状的路径。或多或少有128条路径。路径在列表中定义，稍后使用元素进行引用。我...

html svg

回答 1 投票 0

如何正确地将 prop“title”传递给 svgr React 组件？

我需要将 prop title 传递给返回 svg 标签的 React 组件。我的 webpack @svgr/webpack 加载器设置： { 加载器：'@svgr/webpack'，选项：{ memo: true, titleProp: true }...

reactjs typescript svg types svgr

回答 1 投票 0

如何获取 svgElement 的比例？

我正在研究 svg。 ...

javascript html svg

回答 3 投票 0

光栅图像外边缘路径

我正在寻求有关创建代码的最简单方法的建议，该代码将生成具有透明度的PNG图像轮廓的路径（SVG）。它可以是 Python 脚本，也可以是命令行命令（...

python svg potrace

回答 1 投票 0

在 Ubuntu 上使用 cairosvg 使用 Python 将带有自定义字体的 SVG 转换为 PNG

我需要将带有自定义字体的 SVG 转换为 PNG，为此我使用以下 Python 代码。导入 cairosvg png = cairosvg.svg2png(bytestring=svg_data) 该代码在我的本地计算机上运行良好（

python svg fonts cairo

回答 1 投票 0

SVG 动画向后

我对 svg 动画了解不多，但我从 a) 点到 b) 点进行了半次旋转动画，持续了 4 秒，我希望旋转之后从 b) 点回到 a) 点...

html animation svg

回答 1 投票 0

填充 SVG 路径的内部

我尝试使用以下 HTML 代码填充 SVG 中路径元素的内部：我在 SO 上看过几篇相关帖子，但发现它们难以理解且没有帮助。做什么...

html svg

回答 1 投票 0

如何避免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();

html css svg

回答 2 投票 0

更改区域外元素的颜色

您能帮我在svg中实现以下效果吗？ svg 由网络应用程序动态生成，包含各种颜色的形状。当用户选择 svg 中的一个区域时，所有...

svg colors svg-filters

回答 1 投票 0

底部带有彩色弯曲边框的背景图像

我试图用css3来实现这一点，我尝试使用带有百分比值的边框半径，但它并不总是相同的，我总是有一个圆角，并且边框将开始在cor上消失...

css svg border clip

回答 1 投票 0

在 <use><svg> 中组合多个

我想创造一个图像，比如说，一颗戴着王冠的雄鹿，里面有一颗燃烧的心。这两个元素的定义如下所示：我想创造一个图像，比如说，一颗戴着王冠的雄鹿，里面有一颗燃烧的心。两个元素的定义如下： <body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="d-none"> <defs> … <symbol id="bi-heart" class="bi bi-heart" viewBox="0 0 16 16"> <path d="…"/> </symbol> <symbol id="bi-stag" class="bi bi-stag" viewBox="0 0 16 16"> <path d="…"/> </symbol> … </defs> </svg> … </body> 我将它们组合起来如下： <div> <svg width="64" height="64" fill="currentColor"> <use href="#bi-heart"></use> <use href="#bi-stag"></use> </svg> </div> 到目前为止一切顺利。但现在我希望雄鹿变小 N 倍，并且以 hz/vt 为中心（或者更好的是，具有相对偏移）。如何实现这一目标？ Kudo 致@enxaneta，答案是： <div> <svg width="64" height="64" fill="currentColor">  <use href="#bi-heart" width="64" height="64"></use>  <use href="#bi-stag" width="32" height="32" x="16" y="16"></use> </svg> </div>

html svg

回答 1 投票 0

散点图中的超链接点 - matplotlib

我看到 matplotlib 的艺术家能够将超链接嵌入到图形对象中，如文档中所示并在此处简要提到。我想尝试将超链接嵌入到页面中...

python matplotlib svg

回答 2 投票 0

svg 相关问题

最新问题