可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。
我有一个 SVG 图像作为网页页脚的背景图像。徽标文本出现在该背景上，其颜色需要适应背景的浅色或深色部分。 在大
我有一个 SVG 生成的六角网格。 六边形网格由多边形组成，这些多边形通过 PhP 阵列输入其点。 后面跟着一个 元素，该元素指向 我有一个 SVG 生成的六角网格。 六边形网格由多边形组成，这些多边形通过 PhP 阵列输入其点。 <polygon> 后面跟着一个 <use> 元素，该元素指向 <symbol>。 此代码正确呈现十六进制网格并且填充属性有效。 但是，当 use 元素渲染 symbol 时，它始终将其放置在视口上的相同位置。 网格在视口中的多个位置进行渲染，当其点发生变化时，如何保持 symbol 相对于 polygon 的关系？ 点的示例数组代码 $points = array("247.8,37.9 223.8,37.9 211.7,58.9 223.8,79.9 247.8,79.9 259.8,58.9", ,"247.8,79.9 223.8,79.9 211.7,100.9 223.8,121.9 247.8,121.9 259.8,100.9" ,"211.7,100.9 187.7,100.9 175.7,121.9 187.7,143 211.7,143 223.8,121.9" ,"211.7,143 187.7,143 175.7,164 187.7,185 211.7,185 223.8,164" ,"211.7,185 187.7,185 175.7,206 187.7,227 211.7,227 223.8,206" ,"211.7,227 187.7,227 175.7,248 187.7,269 211.7,269 223.8,248" ,"211.7,269 187.7,269 175.7,290 187.7,311.1 211.7,311.1 223.8,290" ,"211.7,311.1 187.7,311.1 175.7,332.1 187.7,353.1 211.7,353.1 223.8,332.1" echo '<svg version="1.1" viewBox="0 0 2410 1192" x="0" y="0" preserveAspectRatio="none" width="100%">'; $hex = 0000; //Symbol echo '<symbol> <path id="hills" style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.03431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 234.27969,88.879347 c -2.45345,0.0538 -5.06817,2.298827 -7.87745,7.163223 l 15.63905,0.523621 c -2.40829,-4.9797 -4.981,-7.744138 -7.7616,-7.686754 z m 7.59808,8.001824 c -2.19129,0.03587 -4.68463,1.308966 -7.33231,4.522159 -3.83449,-1.16121 -7.72778,1.0103 -11.72419,9.24363 l 22.08548,0.14794 c -2.78806,-3.67548 -5.58581,-6.87639 -8.40893,-8.51612 l 13.63896,3.34992 c -0.79213,-4.08344 -3.93464,-8.819257 -8.25901,-8.747797 z" /></symbol>'; foreach ($points as $p) { echo '<polygon class="st6" points="'.$p.' " '; getFill($hydro,$landfill,$hex); echo 'id="'.$hex.'" stroke="#000000" stroke-width="1"/>'; echo '<use xlink:href="#hills"/>'; $hex++; } echo '</svg>'; 示例输出（请注意，山丘仅以一个十六进制渲染）。 [十六进制地图示例] https://www.noxgeo.com/starfinder/galaxy/data/map-sample.png SVG 输出示例： <svg version="1.1" viewBox="0 0 2410 1192" x="0" y="0" preserveAspectRatio="none" width="100%"> <symbol> <path id="hills" style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.03431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 234.27969,88.879347 c -2.45345,0.0538 -5.06817,2.298827 -7.87745,7.163223 l 15.63905,0.523621 c -2.40829,-4.9797 -4.981,-7.744138 -7.7616,-7.686754 z m 7.59808,8.001824 c -2.19129,0.03587 -4.68463,1.308966 -7.33231,4.522159 -3.83449,-1.16121 -7.72778,1.0103 -11.72419,9.24363 l 22.08548,0.14794 c -2.78806,-3.67548 -5.58581,-6.87639 -8.40893,-8.51612 l 13.63896,3.34992 c -0.79213,-4.08344 -3.93464,-8.819257 -8.25901,-8.747797 z"></path> </symbol> <polygon class="st6" points="247.8,37.9 223.8,37.9 211.7,58.9 223.8,79.9 247.8,79.9 259.8,58.9 " fill="#fdf898" id="0" stroke="#000000" stroke-width="1"></polygon><use xlink:href="#hills"></use><polygon class="st6" points="247.8,79.9 223.8,79.9 211.7,100.9 223.8,121.9 247.8,121.9 259.8,100.9 " fill="#66D3FA" id="1" stroke="#000000" stroke-width="1"></polygon> <use xlink:href="#hills"></use> <polygon class="st6" points="211.7,100.9 187.7,100.9 175.7,121.9 187.7,143 211.7,143 223.8,121.9 " fill="#fdf898" id="2" stroke="#000000" stroke-width="1"></polygon> <use xlink:href="#hills"></use> <polygon class="st6" points="211.7,143 187.7,143 175.7,164 187.7,185 211.7,185 223.8,164 " fill="#66D3FA" id="3" stroke="#000000" stroke-width="1"></polygon> <use xlink:href="#hills"></use> <polygon class="st6" points="211.7,185 187.7,185 175.7,206 187.7,227 211.7,227 223.8,206 " fill="#66D3FA" id="4" stroke="#000000" stroke-width="1"></polygon> <use xlink:href="#hills"></use> </svg> 就像评论中提到的那样，如果您知道每个元素的放置位置，那么控制会更容易。因此，首先以路径为中心（六边形和山丘等，围绕 0,0）。然后使用变换/翻译对需要相同位置的元素进行分组或将它们放置在同一位置（这取决于您的用例）。 不用介意 <symbol> 元素。您最好只引用路径元素，然后在 <use> 元素上给它们一个 fill 属性。 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100"> <defs> <path id="hex" d="m -10 -17.32 l 20 0 l 10 17.32 l -10 17.32 l -20 0 l -10 -17.32 z" strike-width="2" stroke="black" /> <path id="hills" d="m -13 7 l 5 -10 l 5 10 m -2 -4 l 5 -10 l 8 14 m -4 -7 l 3 -6 l 6 10" stroke-width="2" stroke="black" fill="none"/> </defs> <g transform="translate(21 18.32)"> <use href="#hex" fill="red" /> <use href="#hills" /> </g> <g transform="translate(83 18.32)"> <use href="#hex" fill="steelblue" /> </g> <g transform="translate(52 36.64)"> <use href="#hex" fill="orange" /> </g> <g transform="translate(83 54.96)"> <use href="#hex" fill="tomato" /> <use href="#hills" /> </g> </svg>
标题含糊不清；让我澄清一下：我有一个 svg 图像，其中包含我想要用自定义字体呈现的文本。 但是，嵌入字体时似乎不会出现新问题...
我正在 SVG 中绘制文本标签。我有一个可用的固定宽度（比如 200px）。当文字太长时，如何修剪？ 理想的解决方案还会在文本被剪切的地方添加省略号 (...)。乙...
在 Rails 上使用 ruby。 我想要通过 Carrierwave 上传 SVG 文件来制作 .png 缩略图。 我在使用 Carrierwave 将文件转换为 png 的语法时遇到问题。 这已经很接近了，
我想将 svg-mask 分配给 svg-image。我可以使用面具上的 id 来完成这项工作，如下所示： 我想将 svg-mask 分配给 svg-image。我可以使用面具上的 id 来完成这项工作，如下所示： <svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <mask id="mask"> <circle cx="100" cy="100" r="100" fill="white"></circle> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#mask)"></rect> </svg> 但是我想多次加载此 svg，并在 svg 标签中使用不同的 id。因此我将生成“#mask”-id 的重复项。使用多个 id 是无效代码。所以我想用一个类来引用合适的掩码。这意味着我无法使用mask=url()技术。 <svg id="svg2" width="5cm" height="5cm" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <mask class="mask"> <circle cx="100" cy="100" r="100" fill="white"></circle> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="red" mask="url(can't use this)"></rect> </svg> 如果掩码具有类而不是 id，有没有办法将掩码应用于 rect 元素？也许使用 javaScript 或其他我没有想到的方式。 完整的故事/背景： 我实际上正在使用 php 为 Joomla 制作一个 svg 图像滑块模块。该 php 生成一个包含 javascript、css 和 svg 的模块。我使用 javascript 为蒙版设置动画。 我确实让它与唯一的 id 一起工作。我只是想知道是否有一种方法可以在不引用 id 的情况下将掩码分配给元素。我可能想这样做，因为我的代码读起来有点混乱，因为我必须在我的 javascript/svg 和 css 中为每个唯一的 id 使用一些 php。 不。您只能通过 id 引用蒙版。您无法以任何其他方式引用 SVG 蒙版。 根据您的描述，我了解到您有一个相同的图形实体，您想用不同的形式多次掩盖。干脆写下来： <!-- start with an invisible svg that only contains mask definitions --> <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- first, you have a circular mask --> <mask id="circle-mask"> <circle cx="100" cy="100" r="80" fill="white" /> </mask> <!-- then, you have a different mask, lets say a diamond --> <mask id="diamond-mask"> <polygon points="100,20 180,100 100,180 20,100" fill="white" /> </mask> </defs> </svg> <!-- further into your document, you want to mask a rectangle --> <svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <!-- reference the circle mask --> <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#circle-mask)" /> </svg> <!-- with the circle again, as often as you want, nothing changes --> <svg id="svg2" width="5cm" height="5cm" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <!-- the mask is the same, so no difference to above --> <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#circle-mask)" /> </svg> <!-- and now with the diamond; that one is different --> <svg id="svg3" width="5cm" height="5cm" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <!-- if the mask changes, you need to change the reference --> <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#diamond-mask)" /> </svg> 您还可以在样式表中引用蒙版，并根据蒙版形状为引用元素指定一个类： .masked.circular rect { mask: url(#circle-mask); } .masked.diamond rect { mask: url(#diamond-mask); } <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="circle-mask"> <circle cx="100" cy="100" r="80" fill="white" /> </mask> <mask id="diamond-mask"> <polygon points="100,20 180,100 100,180 20,100" fill="white" /> </mask> </defs> </svg> <svg id="svg1" class="masked circular" width="5cm" height="5cm" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="200" height="200" fill="red" /> </svg> <svg id="svg2" class="masked circular" width="5cm" height="5cm" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="200" height="200" fill="red" /> </svg> <svg id="svg1" class="masked diamond" width="5cm" height="5cm" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="200" height="200" fill="red" /> </svg> 规范的另一个奇妙的短视让我想住在树林里的小屋里。 这里有一个 <script>，希望您能够将其放入 SVG 中并使用以下方法删除重复的蒙版 ID： <script> const svg = document.currentScript.closest("svg"); const mask = svg.querySelector("mask"); const target = svg.querySelector("[mask]"); const id = Math.random(); mask.id = id; target.mask = `url(#${id})`; </script> 使用 Math.random() 作为（几乎保证唯一的）id。 修改想法： 在生成新 ID 之前检查重复的 ID。 不要执行 Math.random()，而是保留任何原始 id 名称并附加一个递增整数，以获得更好的 SVG 渲染可读性（例如 my-mask-1）。 除了<mask>之外，还可以做其他需要唯一ID的事情。
当我尝试在 python 中的 Transitions 库中导出“.svg”文件时出现问题
我只是尝试从这个来源的一个简单的例子来学习库： 从transitions.extensions导入GraphMachine 从 functools 导入部分 类型号： def clear_state(self, deep=False, f...
如何使用一个 svg 路径作为视口或作为另一个 svg 的边界
我需要用杯子作为黄色液体容器 我需要用杯子作为黄色液体容器 <?xml version="1.0" encoding="utf-8"?> <svg viewBox="74.816 9.773 216.518 267.963" width="216.518" height="267.963" xmlns="http://www.w3.org/2000/svg"> <path id="cup" d="M 104.816 11.024 L 263.836 9.773 C 280.405 9.773 291.334 24.455 291.334 41.024 L 259.943 250.942 C 257.98 267.511 250.611 276.282 235.534 276.282 L 139.087 277.736 C 122.818 277.736 112.515 271.916 111.215 255.347 L 74.816 41.024 C 74.816 24.455 88.247 11.024 104.816 11.024 Z" stroke="rgb(222, 227, 240)" strokewidth="1" style="fill: rgb(173, 173, 173);" transform="matrix(1, 0, 0, 1, 0, -7.105427357601002e-15)"/> <path id="gentle-wave" d="M 86.759 115.641 C 105.042 107.431 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 273.667 112.514 281.515 116.703 L 256.016 272.501 L 114.383 268.251 L 86.759 115.641 Z" style="fill-rule: nonzero; fill: rgb(215, 218, 85);" transform="matrix(1, 0, 0, 1, 0, -7.105427357601002e-15)"> <animate attributeName="d" values="M 54.885 151.764 C 73.168 143.554 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 319.353 147.575 327.201 151.764 L 327.201 275.688 L 54.885 275.688 L 54.885 151.764 Z; M 54.885 151.764 C 73.168 143.554 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 319.353 147.575 327.201 151.764 L 327.201 275.688 L 54.885 275.688 L 54.885 151.764 Z" begin="0.13s" dur="2s" fill="freeze" end="2.13s"/> <animateMotion path="M 0 -19.124 L 22.441 -81.809" calcMode="linear" begin="0s" dur="2s" fill="freeze"/> </path> </svg> 这是目前的结果。 这就是我需要的。 即使液体流出，液体的极限也需要是杯子。 您需要使用杯子路径两次，因此我将其移动到 <defs> 元素中，这样它就不会被绘制。首先，我在蒙版中使用杯子路径，然后使用 <use> 标签将其绘制为第一个元素。 面罩用于液体的分组元件。 <svg viewBox="74.816 9.773 216.518 267.963" width="216.518" height="267.963" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="cup" d="M 104.816 11.024 L 263.836 9.773 C 280.405 9.773 291.334 24.455 291.334 41.024 L 259.943 250.942 C 257.98 267.511 250.611 276.282 235.534 276.282 L 139.087 277.736 C 122.818 277.736 112.515 271.916 111.215 255.347 L 74.816 41.024 C 74.816 24.455 88.247 11.024 104.816 11.024 Z" transform="matrix(1, 0, 0, 1, 0, -7.105427357601002e-15)"/> <mask id="mask01"> <use href="#cup" stroke="black" strokewidth="1" fill="white"/> </mask> </defs> <use href="#cup" stroke="rgb(222, 227, 240)" strokewidth="1" fill="rgb(173, 173, 173)"/> <g mask="url(#mask01)"> <path id="gentle-wave" d="M 86.759 115.641 C 105.042 107.431 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 273.667 112.514 281.515 116.703 L 256.016 272.501 L 114.383 268.251 L 86.759 115.641 Z" style="fill-rule: nonzero; fill: rgb(215, 218, 85);" transform="matrix(1, 0, 0, 1, 0, -7.105427357601002e-15)"> <animate attributeName="d" values="M 54.885 151.764 C 73.168 143.554 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 319.353 147.575 327.201 151.764 L 327.201 275.688 L 54.885 275.688 L 54.885 151.764 Z; M 54.885 151.764 C 73.168 143.554 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 319.353 147.575 327.201 151.764 L 327.201 275.688 L 54.885 275.688 L 54.885 151.764 Z" begin="0.13s" dur="2s" fill="freeze" end="2.13s"/> <animateMotion path="M 0 -19.124 L 22.441 -81.809" calcMode="linear" begin="0s" dur="2s" fill="freeze"/> </path> </g> </svg>
尝试重新创建此 JavaScript 滚动动画 - 响应滚动方向的变化以及不同转换之间的变形 参考代码库的示例 https://www....
折线{ 点：35,35 40,50 70,50； } polyline{ points: 35,35 40,50 70,50; } <svg width='80px' height='80px'> <rect width='80' height='80' fill='none' stroke='black'></rect> <polyline points="35,35 40,50 60,10" fill="none" stroke="black" stroke-width='2'></polyline> </svg> 请告诉我是否可以通过css设置折线 function setPointsOnPoly(pointList, elemId) { obj = document.getElementById(elemId); obj.setAttribute("points", pointList); } function removePoints(elemId) { obj = document.getElementById(elemId); obj.removeAttribute("points"); } setPointsOnPoly('35,35 40,50 70,10', 'polyCheck'); <svg width='80px' height='80px'> <rect width='80' height='80' fill='none' stroke='black'></rect> <polyline id="polyCheck" fill="none" stroke="black" stroke-width='2'></polyline> </svg> <button onclick="setPointsOnPoly('35,35 40,50 70,10', 'polyCheck');">Set Check</button> <button onclick="removePoints('polyCheck');">Remove Check</button> 我会在 javascript 中执行此操作，这将非常接近您在 CSS 端所需的输入。 如果您想进一步阅读如何通过 CSS 实际完成所有这些操作，我建议您阅读这里。 提供的链接基本上使用 jQuery，但这对您来说应该感觉更舒服一些，因为它通过与 CSS 相同的语法访问元素。 将两条折线放入 . 并在风格上将他们的“笔画”切换为“无”。 “一般的英雄总是会走弯路”。
我在 ttf 文件中有一个字体，想要生成 SVG，并将文本转换为路径。我不需要图像（所以使用 imagettftext 或 Image Magick 字体渲染功能是不够的），我需要形状，t...
我想使用引导程序中的图标，但我需要它垂直翻转： https://icons.getbootstrap.com/icons/arrow-left-right/ 我宁愿需要一个左右箭头，这样上面的箭头......
如何将svg元素（由react-native-svg制作）放置在所有块下？
如何将svg元素（由react-native-svg制作）放置在所有块下（我想像ImageBackround一样），这样它就不会与块重叠？ 我尝试做这个绝对位置（带有海拔和
我正在使用 d3 渲染 svg 折线图。对于 y 轴，图表数据中的最大值为 104，最小值为 0。我已将图表高度设置为 500。但最大值（即 104）应该呈现为...
我在将 svg 文本元素绑定到 razor 时遇到问题。 如果我这样做 世界你好 它工作正常 - 但如果我这样做： &l...
我正在尝试将 SVG 蒙版应用到 div 元素，但遇到蒙版无法随容器正确缩放的问题。面具似乎溢出容器，仅显示......
我正在开发一个应用程序来跟踪 SVG 视图框中相对于 SVG 元素本身大小的移动。 下面的示例代码已被简化，以删除任何额外的函数、变量，
这个问题专门针对SVG组件，即使用svg模板的组件。我知道如何在 Angular 18 中动态创建组件，这个问题更
Angular 新手（使用 18.2）并尝试从 svg 上的鼠标事件获取回调。代码是这样的： 组件.html …… Angular 新手（使用 18.2）并尝试从 svg 上的鼠标事件获取回调。代码是这样的： 组件.html … <object data="image.svg" type="image/svg+xml" #mySvg></object> … <div> @if (activeElement) { ... display info re svg path ... } </div> 组件.ts export class MyComponent implements AfterViewInit { protected activeElement: type = undefined @ViewChild('mySvg') mySvg!: ElementRef; ngAfterViewInit(): void { this.mySvg.nativeElement.addEventListener('load', () => { this.mySvg.nativeElement.contentDocument.querySelector('svg').addEventListener('mouseover', this.onMouseover.bind(this)) }) } protected onMouseover(event: MouseEvent): void { if (conditions) { this.activeElement = this.service.getDataForElement(event.target) } else { this.activeElement = undefined } } 回调似乎按预期工作。鼠标悬停时，会调用 onMouseover 方法并更新类变量（在过程中的各个点通过 console.log(JSON.stringify(this)) 确认），但模板不会响应变量更改。我尝试了 ngAfterViewInit 的几个不同版本，例如将所有逻辑直接放在那里（而不是绑定）并按照建议的几个地方使用超时，但行为没有改变。 我能够让它工作的唯一方法是将模板更改为 … <svg xmlns="http://www.w3.org/2000/svg" (mouseover)="onMouseover($event)"> <path...> … </svg> 所以我认为控制器 -> 模板交互应该正常工作。 关于如何调试这个或要研究什么有什么建议吗？预先感谢。 “变更检测器”机制可能是这里的问题。因此，您的类变量 activeElement 必须添加到 Angular 更改检测器机制中，以便跟踪更改并对模板文件产生影响。为您的类变量activeElement添加setter和getter。这将跟踪更改，因为 setters 和 getters 是更改检测器的一部分。 .ts 文件： get activeElementValue() { return this.activeElement } set activeElementValue(activeElement) { this.activeElement = activeElement } … if (conditions) { this.activeElementValue = this.service.getDataForElement(event.target); } else { this.activeElementValue = undefined; } .html 文件： … <div> @if (activeElementValue) { ... display info re svg path ... } </div> … 处理变更检测器的其他机会是 setTimeout() 或 detectChanges()。但使用这些解决方案会干扰 Angular 生命周期。这就是为什么我建议使用 getter 和 setter 来解决问题。 设置超时： if (conditions) { setTimeout(() => this.activeElement = this.service.getDataForElement(event.target)); } else { setTineout(() => this.activeElement = undefined); } 检测变化： if (conditions) { this.activeElement = this.service.getDataForElement(event.target); this.changeDetectorRef.detectChanges(); } else { this.activeElement = undefined; this.changeDetectorRef.detectChanges(); }
我想将 svg 中的所有元素单独上传到我的画布中。 你可以在控制台中看到[控制台截图(https://i.sstatic.net/Yj3SGXEx.png) svg文件路径是正确的...