可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
让我们有一个简单的HTML/CSS代码（未优化）如下： html, 身体 { 背景颜色：粉色； 高度：100%； } div { 宽度：80%； 身高：80%； 位置：绝对； 顶部：50%； 乐...
我需要创建一个刻度圈进度条，我需要这样的进度条设计 到目前为止，我已经尝试过同样的设计，但未能成功。 让计数 = 0，间隔 =
React 中的 D3 在从 useState 更新数据时出现问题
我正在使用 React 并开始使用 D3 创建气泡图。 我们的主要思想是我们有一个 useState ，它随着数据的时间而变化。 数据可能会发生三种情况：新的、...
我想创建如下图所示的 HTML 元素： 问题是 DIV 元素具有多边形形状而不是常规矩形，将被放置在其他元素之上，如弹出窗口和
主基线描述文本的垂直位置： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline 我正在寻找这样的水平版本： 是这样吗
我正在创建一个 SVG 圆形进度条。它正在工作，但是当我传递一些值时，因此基于该值它没有完成进度。 下面是我到目前为止尝试过的代码 ...
在 HTML 中显示 SVG 与 WPF SharpVectors 相同 [关闭]
我们有一个用 WPF 制作的应用程序，它使用 SharpVectors 将地图显示为 SVG，现在我们需要使用 blazor 在 HTML 中显示相同的地图。主要问题是我们将元素放置在地图上......
Snap svg 对我来说很新，我遵循了 https://github.com/adobe-webplatform/Snap.svg 中提到的设置。 （webpack 设置）但我收到“Uncaught ReferenceError: eve is not Defined”....
为什么所有页面上都没有显示 Font Awesome 图标？
我尝试将 RSS 图标字体添加到我的 WordPress 网站侧边栏中与我们联系的方式列表中。对于侧边栏小部件中显示的每个图标，我都成功使用了 SVG 图标...
我想知道是否可以使用 style="..." 在内联 html 标签中更改 SVG 图像/图标/徽标的颜色 这是我的代码的一部分，它是一个按钮，我想要...
如何使用typescript解析svg元素的transform属性？ 也就是说，如何解析 svg.g.transform 中字符串中的所有数字和操作，如下所示： 如何使用typescript解析svg元素的transform属性？ 也就是说，如何解析 svg.g.transform 中字符串中的所有数字和操作： <svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)"> <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> 使用 https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement 又名。由原生 DOM 元素实现的 SVGLocatable 和 SVGTransformable 接口/API。 这些元素有一个 .transform 属性，对应于变换属性。该属性的类型为 https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedTransformList 并且您想要查看静态定义的 baseVal。 变换列表有一个属性 numberOfItems 和一个 getItem 方法。它可能有一个 .length 属性和 [] 数组访问器，并且它可能在您的浏览器中是可迭代的，但不要指望这一点。 每个项目都有类型 https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform .type属性告诉您使用了哪条指令。 因此，您可以通过以下方式解析然后再次手动合成变换属性： // javascript js equivalent declaration: // function getAttributeTransform_js(nativeSVGElement) { // typescript ts declaration function getAttributeTransform_ts(nativeSVGElement: SVGGraphicsElement) { // this definition works in ts and js const tl = nativeSVGElement.transform.baseVal; var st: string[] = []; for (let i = 0; i < tl.numberOfItems; i++) { const t/*: SVGTransform*/ = tl.getItem(i); switch (t.type) { case SVGTransform.SVG_TRANSFORM_UNKNOWN: break; case SVGTransform.SVG_TRANSFORM_MATRIX: { // A matrix(…) transformation // Note: this is the most general transformation, capable of representing more transformations than the other combined. // For SVG_TRANSFORM_MATRIX, the matrix contains the a, b, c, d, e, f values supplied by the user. // // Note: instead of comma (,), whitespace separation would also be allowed st.push(`matrix(${t.matrix.a}, ${t.matrix.b}, ${t.matrix.c}, ${t.matrix.d}, ${t.matrix.e}, ${t.matrix.f})`); break; } case SVGTransform.SVG_TRANSFORM_TRANSLATE: { // A translate(…) transformation // For SVG_TRANSFORM_TRANSLATE, e and f represent the translation amounts (a=1, b=0, c=0 and d=1). st.push(`translate(${t.matrix.e}, ${t.matrix.f})`); break; } case SVGTransform.SVG_TRANSFORM_SCALE: { // A scale(…) transformation // For SVG_TRANSFORM_SCALE, a and d represent the scale amounts (b=0, c=0, e=0 and f=0). st.push(`scale(${t.matrix.a}, ${t.matrix.d})`); break; } case SVGTransform.SVG_TRANSFORM_ROTATE: { // A rotate(…) transformation // For SVG_TRANSFORM_ROTATE, a, b, c, d, e and f together represent the matrix which will result in the given rotation. // When the rotation is around the center point (0, 0), e and f will be zero. /* angle float A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified. For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero. */ /* This is the hardest case since the origin information is lost! We need to recompute it from the matrix. from https://math.stackexchange.com/questions/2093314/rotation-matrix-of-rotation-around-a-point-other-than-the-origin matrix.a = cos_angle = c; matrix.b = sin_angle = s; Note that by the laws of geometry: c^2+s^2 = 1 (c and s are coordinates on the unit circle) matrix.e = -x*c + y*s + x; matrix.f = -x*s - y*c + y; Using Mathematica/Wolfram Language: "Assuming[c^2+s^2==1,Solve[e == -x*c + y*s + x&& f == -x*s - y*c + y,{x,y},Reals]//Simplify]//InputForm" (you can use WL for free here: https://develop.wolframcloud.com/objects/c26e16f7-44e7-4bb6-81b3-bc07782f9cc5) {{x -> (e + (f*s)/(-1 + c))/2, y -> (f - c*f + e*s)/(2 - 2*c)}} */ const e = t.matrix.e, f = t.matrix.f, c = t.matrix.a, s = t.matrix.b; const originx = (e + (f*s)/(-1 + c))/2; const originy = (f - c*f + e*s)/(2 - 2*c); st.push(`rotate(${t.angle}, ${originx}, ${originy})`); break; } case SVGTransform.SVG_TRANSFORM_SKEWX: { // A skewx(…) transformation // For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). /* angle float A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified. For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero. */ st.push(`skewx(${t.angle})`); break; } case SVGTransform.SVG_TRANSFORM_SKEWY: { // A skewy(…) transformation // For SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). /* angle float A convenience attribute for SVG_TRANSFORM_ROTATE, SVG_TRANSFORM_SKEWX and SVG_TRANSFORM_SKEWY. It holds the angle that was specified. For SVG_TRANSFORM_MATRIX, SVG_TRANSFORM_TRANSLATE and SVG_TRANSFORM_SCALE, angle will be zero. */ st.push(`skewy(${t.angle})`); break; } } } return st.join(','); // instead of comma (,), whitespace separation is also allowed } // example const r = <SVGRectElement>document.createElementNS("http://www.w3.org/2000/svg", "rect"); // the parseable syntax for the transform attribute is pretty relaxed r.setAttribute("transform", "translate(1, 0),rotate(0.5), scale(1 2)"); // note that the browser may canonicalize your syntax // EDGE canonicalizes the transform to read: // 'translate(1) rotate(0.5) scale(1, 2)' console.log(r.getAttribute("transform")); // basically equivalent: console.log(getAttributeTransform_ts(r)); 你的例子： function createElementFromHTML(htmlString) { var div = document.createElement('div'); div.innerHTML = htmlString.trim(); // Change this to div.childNodes to support multiple top-level nodes return div.firstChild; } getAttributeTransform_ts(createElementFromHTML(` <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)"> <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> </g> `)) // gives // 'rotate(-10, 49.99999999999982, 99.99999999999972),translate(-36, 45.5),skewx(40),scale(1, 0.5)' 请注意，您应该使用 .getAttribute("transform") 让浏览器为您合成 SVGTransformList 的字符串形式，而不是使用我上面的脚本！ 请注意，我们无法完美检索“旋转”的原始参数，因为没有针对它的 API。它必须根据二维齐次（旋转）矩阵计算。 灵感来自： 使用 javascript 解析 SVG 转换属性 https://stackoverflow.com/a/41102221/524504 另请参阅： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
在 Safari 上放大 SVG 中的低分辨率像素图像元素，但在 Firefox 和 Chrome 中则不然
这就是 Chrome 和 Firefox 中的样子： 这是它在 Safari 中的样子： 我已经尝试过通常建议的 图像 { 图像渲染：optimizeSpeed； 图像渲染...
我有一个 QML 控件来显示 .svg 图片。我希望 .svg 的颜色适合我的用户定义主题。但我不知道如何改变 svg 的颜色。 我有一个像这样的图像控件，但是......
有没有办法在 SVG Circle 内显示图像？ 我尝试在 Svg 元素内添加图像，但图像没有出现在圆圈中。 有没有办法在 SVG Circle 内显示图像？ 我尝试将图像添加到 Svg 元素内，但图像没有出现在圆圈中。 <svg width="100" height="100"> <circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" /> <img src="starkeen_ane.jpg"/> </svg> 你能帮我吗？ 这是一个详细说明上述 Havenard 评论的示例： <svg width="240" height="240"> <defs> <clipPath id="circleView"> <circle cx="120" cy="120" r="100" /> </clipPath> </defs> <image width="240" height="240" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/SVG_Logo.svg/240px-SVG_Logo.svg.png" clip-path="url(#circleView)" /> </svg> 您实际上并没有绘制内部包含图像的 <circle> 元素 - 相反，定义一个圆形剪辑路径，并将其设置为 <image> 标签上的“clip-path”属性。 这可能不是最好的方法。但效果很好。您可以做的事情是将其放置到相对位置并编辑顶部和左侧属性，以便您的图像位于 svg 图像的中心。同样重要的是将其放置在您的 svg 标签之外。 img { position: relative; top: -30px; left: -70px; } <svg width="100" height="100"> <circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" /> </svg> <img src="https://i.sstatic.net/vxCmj.png"/>
我想在我的圈子上放两个滤镜。 （也许更多） 我尝试过这样做： 过滤器=“url(#f1);url(#f2)” 和： 过滤器=“网址（#f1，#f2）” 和： 过滤器=“url(#f1 #f2)” 但它们都不起作用。我怎样才能批准...
如何在 JavaScript 中获取正多边形的最大“宽度”？
我一直在玩数学方程来绘制“规则”多边形（具有相同长度边和角度的多边形）。我还没有完全能够让它工作，这样，给定所需的宽度
绘制带有圆角的 SVG 多边形的架构，它可以缩放到不同的尺寸，但保持相同的圆角？
现在我有这个多边形代码： 从 'react' 导入 { useMemo } 导出常量大小 = 2048 导出常量 CENTER = SIZE / 2 const ANGLE = -Math.PI / 2 // 从顶部中心开始第一个顶点...
我有一个项目的 svg。 SVG代码： 我有一个项目的 svg。 SVG 代码： <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284.89 288.95"> <path class="crystal-outline" d="M6,231.49c-.42-10.39-.8-20.78-1.27-31.17-.38-8.5-.89-17-1.32-25.49-.46-9.16-.87-18.32-1.35-27.48Q1.49,135.77.77,124.2c-.18-2.86-.32-5.73-.71-8.57-.33-2.44.68-3.93,2.57-5.29q18-13,35.92-26.16c12.36-9.12,24.62-18.38,37-27.53Q105.72,34.25,136,11.93c4.63-3.43,9.26-6.84,13.85-10.31,2.55-1.93,5.19-2,8.1-.94q51.13,18.41,102.29,36.75,7.61,2.73,15.2,5.41a4.62,4.62,0,0,1,3.43,4.67c.16,7.32.36,14.63.66,21.94.38,9.06.87,18.11,1.33,27.17.43,8.5.9,17,1.33,25.49.46,9.17.86,18.34,1.35,27.5.39,7.06.86,14.11,1.33,21.16.31,4.61-1.58,7.82-5.34,10.58q-58.89,43.44-117.63,87.08c-8.48,6.28-17,12.47-25.44,18.84a6.85,6.85,0,0,1-7.28,1.1c-23-8.35-46.06-16.54-69.1-24.78-15.24-5.45-30.48-10.94-45.75-16.33-7.24-2.56-8-3.42-8.19-11.1,0-1.55,0-3.11,0-4.67Zm218.12-88.23c-1-17.67-2-34.78-2.92-51.89-.14-2.6-1.5-3.67-3.66-4.47C200.8,80.67,184,74.46,167.29,68.09a6.64,6.64,0,0,0-7,1q-48.65,36-97.32,72A5.53,5.53,0,0,0,61,144.82c-.1,3.08.39,6.16.54,9.25.71,14.28,1.64,28.56,1.93,42.85.08,4.06,1.64,5.61,5,6.83q24.69,9.09,49.27,18.44a7.6,7.6,0,0,0,8-1.22q47-34.75,94-69.38C222.89,149.26,225.67,147.16,224.16,143.26ZM153.1,5.34,4.58,115.15C22,123.5,39,131.54,55.88,139.8c2.39,1.17,3.9.95,5.89-.54q19.91-14.91,39.95-29.65c19.49-14.38,39-28.7,58.48-43.15a5,5,0,0,0,1.58-3.81c-.24-3.93-.84-7.85-1.44-11.76-1.45-9.42-3-18.82-4.49-28.24C155,17.07,154.08,11.47,153.1,5.34ZM279.57,175.53c-17.48-8.36-34.45-16.46-51.38-24.63a4.08,4.08,0,0,0-4.84.63c-7.27,5.5-14.64,10.89-22,16.31Q164,195.46,126.48,223c-2.38,1.74-3.35,3.54-2.84,6.38.62,3.36,1,6.75,1.56,10.13q2.56,16.48,5.16,33c.62,3.86,1.31,7.71,2.06,12.08ZM272.34,47.84l-117-42.19c2.71,18.11,5.19,35.48,8,52.8.42,2.58-.52,6,3.49,7.5Q192.62,75.26,218.23,85a4.27,4.27,0,0,0,4.79-.77c4.84-3.72,9.81-7.27,14.72-10.89C249.09,65,260.44,56.63,272.34,47.84ZM11.41,240.76c16.8-12.39,33-24.3,49.09-36.28A3.88,3.88,0,0,0,62,201.74c-.22-5.06-.79-10.11-1.06-15.17-.72-13.48-1.42-27-2-40.45-.08-2-.57-3.1-2.49-4-10.72-5-21.38-10.13-32-15.24-6.44-3.07-12.87-6.18-19.86-9.54.36,2.26.74,3.85.84,5.46.49,8.49.91,17,1.36,25.49q.66,12.42,1.33,24.83c.67,12.69,1.37,25.37,2,38.06C10.58,220.8,11,230.41,11.41,240.76Zm269-68.08c-2.14-41.25-4.23-81.79-6.36-122.94l-7,5.17Q246.43,70,225.92,85.22c-1.11.83-2.37,2.4-2.35,3.61.09,5.07.73,10.13,1,15.21.72,13.38,1.44,26.76,1.95,40.16a4.15,4.15,0,0,0,2.79,4.22c13.06,6.19,26.08,12.48,39.12,18.72C272.22,169,276.05,170.67,280.38,172.68Zm-151.52,111a13.54,13.54,0,0,0,.1-2.25c-2.54-17.06-5.21-34.1-7.59-51.18-.44-3.16-1.8-4.53-4.64-5.57C100.11,218.53,83.55,212.27,67,206a4.72,4.72,0,0,0-5.17.61c-10.74,8.07-21.61,16-32.43,24-5.14,3.8-10.27,7.63-15.64,11.62Z" /> <path class="crystal-1" d="M224.16,143.26c1.51,3.9-1.27,6-4.43,8.33q-47.08,34.59-94,69.38a7.6,7.6,0,0,1-8,1.22q-24.57-9.37-49.27-18.44c-3.33-1.22-4.89-2.77-5-6.83-.29-14.29-1.22-28.57-1.93-42.85-.15-3.09-.64-6.17-.54-9.25A5.53,5.53,0,0,1,63,141.06q48.62-36,97.32-72a6.64,6.64,0,0,1,7-1C184,74.46,200.8,80.67,217.58,86.9c2.16.8,3.52,1.87,3.66,4.47C222.13,108.48,223.15,125.59,224.16,143.26Z" /> <path class="crystal-2" d="M153.1,5.34c1,6.13,1.86,11.73,2.75,17.31,1.5,9.42,3,18.82,4.49,28.24.6,3.91,1.2,7.83,1.44,11.76a5,5,0,0,1-1.58,3.81c-19.44,14.45-39,28.77-58.48,43.15q-20,14.76-39.95,29.65c-2,1.49-3.5,1.71-5.89.54C39,131.54,22,123.5,4.58,115.15Z" /> <path class="crystal-3" d="M279.57,175.53l-147.15,109c-.75-4.37-1.44-8.22-2.06-12.08q-2.61-16.49-5.16-33c-.53-3.38-.94-6.77-1.56-10.13-.51-2.84.46-4.64,2.84-6.38q37.53-27.48,74.9-55.18c7.33-5.42,14.7-10.81,22-16.31a4.08,4.08,0,0,1,4.84-.63C245.12,159.07,262.09,167.17,279.57,175.53Z" /> <path class="crystal-4" d="M272.34,47.84c-11.9,8.79-23.25,17.15-34.6,25.52C232.83,77,227.86,80.53,223,84.25a4.27,4.27,0,0,1-4.79.77Q192.59,75.32,166.85,66c-4-1.45-3.07-4.92-3.49-7.5-2.82-17.32-5.3-34.69-8-52.8Z" /> <path class="crystal-5" d="M11.41,240.76c-.45-10.35-.83-20-1.3-29.57-.63-12.69-1.33-25.37-2-38.06q-.66-12.42-1.33-24.83c-.45-8.5-.87-17-1.36-25.49-.1-1.61-.48-3.2-.84-5.46,7,3.36,13.42,6.47,19.86,9.54,10.67,5.11,21.33,10.25,32.05,15.24,1.92.89,2.41,2,2.49,4,.55,13.49,1.25,27,2,40.45.27,5.06.84,10.11,1.06,15.17a3.88,3.88,0,0,1-1.51,2.74C44.38,216.46,28.21,228.37,11.41,240.76Z" /> <path class="crystal-6" d="M280.38,172.68c-4.33-2-8.16-3.73-11.94-5.54-13-6.24-26.06-12.53-39.12-18.72a4.15,4.15,0,0,1-2.79-4.22c-.51-13.4-1.23-26.78-1.95-40.16-.28-5.08-.92-10.14-1-15.21,0-1.21,1.24-2.78,2.35-3.61Q246.38,70,267,54.91l7-5.17C276.15,90.89,278.24,131.43,280.38,172.68Z" /> <path class="crystal-7" d="M128.86,283.63,13.76,242.17c5.37-4,10.5-7.82,15.64-11.62,10.82-8,21.69-15.88,32.43-24A4.72,4.72,0,0,1,67,206c16.55,6.28,33.11,12.54,49.73,18.64,2.84,1,4.2,2.41,4.64,5.57,2.38,17.08,5,34.12,7.59,51.18A13.54,13.54,0,0,1,128.86,283.63Z" /> </svg> Svg 图像： 我想这样做，以便当用户单击晶体的每个面（路径crystal-1 - .crystal-6）时，会选中相应的复选框。然后，我将使用 CSS 更改该部分的填充颜色作为对用户的视觉反馈，但我很确定我知道如何做到这一点。 幸运的是，每个 <path> 都可以被视为一个单独的 HTML 元素。所以你可以使用 CSS 或 JS 来定位它。 document.querySelectorAll("svg path:not(.crystal-outline)").forEach(function(path) { path.addEventListener('click', function(ev) { var cls = this.classList[0] // console.log("select checkbox with class " + cls); var checkboxCls = "checkbox-" + cls document.querySelector("." + checkboxCls).checked = !document.querySelector("." + checkboxCls).checked }) }) var checkboxContainer = document.querySelector(".checkbox-container"); for (var i = 1; i <= 7; i++) { var checkbox = document.createElement("input") checkbox.type = "checkbox" checkbox.className = "checkbox-crystal-" + i checkboxContainer.append(checkbox) } body { background: white; } svg { width: 100%; } .crystal-outline { fill: white; } path:not(.crystal-outline) { cursor: pointer; } path:not(.crystal-outline):hover { fill: red; } <div class="checkbox-container"> </div> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000 ">/ <path class="crystal-outline" d="M6,231.49c-.42-10.39-.8-20.78-1.27-31.17-.38-8.5-.89-17-1.32-25.49-.46-9.16-.87-18.32-1.35-27.48Q1.49,135.77.77,124.2c-.18-2.86-.32-5.73-.71-8.57-.33-2.44.68-3.93,2.57-5.29q18-13,35.92-26.16c12.36-9.12,24.62-18.38,37-27.53Q105.72,34.25,136,11.93c4.63-3.43,9.26-6.84,13.85-10.31,2.55-1.93,5.19-2,8.1-.94q51.13,18.41,102.29,36.75,7.61,2.73,15.2,5.41a4.62,4.62,0,0,1,3.43,4.67c.16,7.32.36,14.63.66,21.94.38,9.06.87,18.11,1.33,27.17.43,8.5.9,17,1.33,25.49.46,9.17.86,18.34,1.35,27.5.39,7.06.86,14.11,1.33,21.16.31,4.61-1.58,7.82-5.34,10.58q-58.89,43.44-117.63,87.08c-8.48,6.28-17,12.47-25.44,18.84a6.85,6.85,0,0,1-7.28,1.1c-23-8.35-46.06-16.54-69.1-24.78-15.24-5.45-30.48-10.94-45.75-16.33-7.24-2.56-8-3.42-8.19-11.1,0-1.55,0-3.11,0-4.67Zm218.12-88.23c-1-17.67-2-34.78-2.92-51.89-.14-2.6-1.5-3.67-3.66-4.47C200.8,80.67,184,74.46,167.29,68.09a6.64,6.64,0,0,0-7,1q-48.65,36-97.32,72A5.53,5.53,0,0,0,61,144.82c-.1,3.08.39,6.16.54,9.25.71,14.28,1.64,28.56,1.93,42.85.08,4.06,1.64,5.61,5,6.83q24.69,9.09,49.27,18.44a7.6,7.6,0,0,0,8-1.22q47-34.75,94-69.38C222.89,149.26,225.67,147.16,224.16,143.26ZM153.1,5.34,4.58,115.15C22,123.5,39,131.54,55.88,139.8c2.39,1.17,3.9.95,5.89-.54q19.91-14.91,39.95-29.65c19.49-14.38,39-28.7,58.48-43.15a5,5,0,0,0,1.58-3.81c-.24-3.93-.84-7.85-1.44-11.76-1.45-9.42-3-18.82-4.49-28.24C155,17.07,154.08,11.47,153.1,5.34ZM279.57,175.53c-17.48-8.36-34.45-16.46-51.38-24.63a4.08,4.08,0,0,0-4.84.63c-7.27,5.5-14.64,10.89-22,16.31Q164,195.46,126.48,223c-2.38,1.74-3.35,3.54-2.84,6.38.62,3.36,1,6.75,1.56,10.13q2.56,16.48,5.16,33c.62,3.86,1.31,7.71,2.06,12.08ZM272.34,47.84l-117-42.19c2.71,18.11,5.19,35.48,8,52.8.42,2.58-.52,6,3.49,7.5Q192.62,75.26,218.23,85a4.27,4.27,0,0,0,4.79-.77c4.84-3.72,9.81-7.27,14.72-10.89C249.09,65,260.44,56.63,272.34,47.84ZM11.41,240.76c16.8-12.39,33-24.3,49.09-36.28A3.88,3.88,0,0,0,62,201.74c-.22-5.06-.79-10.11-1.06-15.17-.72-13.48-1.42-27-2-40.45-.08-2-.57-3.1-2.49-4-10.72-5-21.38-10.13-32-15.24-6.44-3.07-12.87-6.18-19.86-9.54.36,2.26.74,3.85.84,5.46.49,8.49.91,17,1.36,25.49q.66,12.42,1.33,24.83c.67,12.69,1.37,25.37,2,38.06C10.58,220.8,11,230.41,11.41,240.76Zm269-68.08c-2.14-41.25-4.23-81.79-6.36-122.94l-7,5.17Q246.43,70,225.92,85.22c-1.11.83-2.37,2.4-2.35,3.61.09,5.07.73,10.13,1,15.21.72,13.38,1.44,26.76,1.95,40.16a4.15,4.15,0,0,0,2.79,4.22c13.06,6.19,26.08,12.48,39.12,18.72C272.22,169,276.05,170.67,280.38,172.68Zm-151.52,111a13.54,13.54,0,0,0,.1-2.25c-2.54-17.06-5.21-34.1-7.59-51.18-.44-3.16-1.8-4.53-4.64-5.57C100.11,218.53,83.55,212.27,67,206a4.72,4.72,0,0,0-5.17.61c-10.74,8.07-21.61,16-32.43,24-5.14,3.8-10.27,7.63-15.64,11.62Z" /> <path class="crystal-1" d="M224.16,143.26c1.51,3.9-1.27,6-4.43,8.33q-47.08,34.59-94,69.38a7.6,7.6,0,0,1-8,1.22q-24.57-9.37-49.27-18.44c-3.33-1.22-4.89-2.77-5-6.83-.29-14.29-1.22-28.57-1.93-42.85-.15-3.09-.64-6.17-.54-9.25A5.53,5.53,0,0,1,63,141.06q48.62-36,97.32-72a6.64,6.64,0,0,1,7-1C184,74.46,200.8,80.67,217.58,86.9c2.16.8,3.52,1.87,3.66,4.47C222.13,108.48,223.15,125.59,224.16,143.26Z" /> <path class="crystal-2" d="M153.1,5.34c1,6.13,1.86,11.73,2.75,17.31,1.5,9.42,3,18.82,4.49,28.24.6,3.91,1.2,7.83,1.44,11.76a5,5,0,0,1-1.58,3.81c-19.44,14.45-39,28.77-58.48,43.15q-20,14.76-39.95,29.65c-2,1.49-3.5,1.71-5.89.54C39,131.54,22,123.5,4.58,115.15Z" /> <path class="crystal-3" d="M279.57,175.53l-147.15,109c-.75-4.37-1.44-8.22-2.06-12.08q-2.61-16.49-5.16-33c-.53-3.38-.94-6.77-1.56-10.13-.51-2.84.46-4.64,2.84-6.38q37.53-27.48,74.9-55.18c7.33-5.42,14.7-10.81,22-16.31a4.08,4.08,0,0,1,4.84-.63C245.12,159.07,262.09,167.17,279.57,175.53Z" /> <path class="crystal-4" d="M272.34,47.84c-11.9,8.79-23.25,17.15-34.6,25.52C232.83,77,227.86,80.53,223,84.25a4.27,4.27,0,0,1-4.79.77Q192.59,75.32,166.85,66c-4-1.45-3.07-4.92-3.49-7.5-2.82-17.32-5.3-34.69-8-52.8Z" /> <path class="crystal-5" d="M11.41,240.76c-.45-10.35-.83-20-1.3-29.57-.63-12.69-1.33-25.37-2-38.06q-.66-12.42-1.33-24.83c-.45-8.5-.87-17-1.36-25.49-.1-1.61-.48-3.2-.84-5.46,7,3.36,13.42,6.47,19.86,9.54,10.67,5.11,21.33,10.25,32.05,15.24,1.92.89,2.41,2,2.49,4,.55,13.49,1.25,27,2,40.45.27,5.06.84,10.11,1.06,15.17a3.88,3.88,0,0,1-1.51,2.74C44.38,216.46,28.21,228.37,11.41,240.76Z" /> <path class="crystal-6" d="M280.38,172.68c-4.33-2-8.16-3.73-11.94-5.54-13-6.24-26.06-12.53-39.12-18.72a4.15,4.15,0,0,1-2.79-4.22c-.51-13.4-1.23-26.78-1.95-40.16-.28-5.08-.92-10.14-1-15.21,0-1.21,1.24-2.78,2.35-3.61Q246.38,70,267,54.91l7-5.17C276.15,90.89,278.24,131.43,280.38,172.68Z" /> <path class="crystal-7" d="M128.86,283.63,13.76,242.17c5.37-4,10.5-7.82,15.64-11.62,10.82-8,21.69-15.88,32.43-24A4.72,4.72,0,0,1,67,206c16.55,6.28,33.11,12.54,49.73,18.64,2.84,1,4.2,2.41,4.64,5.57,2.38,17.08,5,34.12,7.59,51.18A13.54,13.54,0,0,1,128.86,283.63Z" /> </svg>
我有一个简单的 svg 艺术作品。当我应用 css 变换比例属性时，位于 svg 边缘的元素会被切断。就像 svg 限制了超出范围的边界和元素
如何在 R 绘图中包含 SVG / R 中的 grImport2 包有什么替代方案？
我想将 SVG 图像添加到 R 中创建的绘图中。 SVG 图像是从 ChemDraw 导出的化学结构。 我们正在谈论 200 个结构，这意味着，如果我可以自动化那就太好了...
