svg 相关问题

可缩放矢量图形（SVG）是一种基于XML的二维矢量图形格式，也可以在HTML中使用。不要仅仅因为您的项目使用SVG而添加此标记。相反，如果您的问题是关于SVG或与其密切相关的问题，请添加标记，例如如何使用SVG实现某些功能。

我正在开发交互式 SVG/AJAX 界面，其中元素由用户即时创建和重新定位。我想支持用户将当前视图导出为 PNG 图像的功能...

php javascript ajax png svg

回答 2 投票 0

我有一个下面给出的 SVG。我已将所有路径合并为一条。但我的最终 SVG 是剪裁的。有人可以帮忙吗？附上前后截图：前：我有一个 SVG，如下所示。我已将所有路径合并为一条。但我的最终 SVG 是裁剪的。有人可以帮忙吗？附上前后截图：之前： <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136Z" fill="black"/> <path d="M14.3166 17.0235C13.7301 17.5381 12.9832 17.8359 12.2098 17.8359C10.4499 17.8359 9.03624 16.3872 9.03624 14.6132C9.03624 13.6114 9.48937 12.6767 10.2764 12.0543C10.6498 11.7565 10.7165 11.2149 10.4232 10.8356C10.13 10.4564 9.59668 10.3887 9.22323 10.6865C8.00967 11.6343 7.31641 13.056 7.31641 14.5994C7.31641 17.3344 9.50284 19.5555 12.1967 19.5555C13.3832 19.5555 14.5165 19.1223 15.4233 18.3231C15.7832 18.0115 15.8098 17.4699 15.5035 17.1044C15.2098 16.7527 14.6635 16.7252 14.3166 17.0235Z" fill="black"/> <path d="M13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z" fill="black"/> </svg> 之后： <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" id="companion-24">  <path fill="#000000" fill-rule="evenodd" clip-rule="evenodd" d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136ZM14.3166 17.0235C13.7301 17.5381 12.9832 17.8359 12.2098 17.8359C10.4499 17.8359 9.03624 16.3872 9.03624 14.6132C9.03624 13.6114 9.48937 12.6767 10.2764 12.0543C10.6498 11.7565 10.7165 11.2149 10.4232 10.8356C10.13 10.4564 9.59668 10.3887 9.22323 10.6865C8.00967 11.6343 7.31641 13.056 7.31641 14.5994C7.31641 17.3344 9.50284 19.5555 12.1967 19.5555C13.3832 19.5555 14.5165 19.1223 15.4233 18.3231C15.7832 18.0115 15.8098 17.4699 15.5035 17.1044C15.2098 16.7527 14.6635 16.7252 14.3166 17.0235ZM13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063ZM7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z"/> </svg> 为了解决这个问题，您需要反转第二条路径，即绘制轮椅的路径。否则路径的重叠部分将为空。请阅读有关 SVG 中的 fill-rule 的更多信息 <svg width="210" height="220" viewBox="0 0 21 22" xmlns="http://www.w3.org/2000/svg"> <path d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136Z M14.3166,17.0235L14.3166,17.0235C14.6635,16.7252 15.2098,16.7527 15.5035,17.1044C15.8098,17.4699 15.7832,18.0115 15.4233,18.3231C14.5165,19.1223 13.3832,19.5555 12.1967,19.5555C9.50284,19.5555 7.31641,17.3344 7.31641,14.5994C7.31641,13.056 8.00967,11.6343 9.22323,10.6865C9.59668,10.3887 10.13,10.4564 10.4232,10.8356C10.7165,11.2149 10.6498,11.7565 10.2764,12.0543C9.48937,12.6767 9.03624,13.6114 9.03624,14.6132C9.03624,16.3872 10.4499,17.8359 12.2098,17.8359C12.9832,17.8359 13.7301,17.5381 14.3166,17.0235Z M13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063Z M7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z" /> </svg>

html svg

回答 1 投票 0

如何在 SVG 中的文本元素内垂直对齐 tspan 元素

我一直在尝试在 SVG 中的跨度内垂直对齐 tspan 几个小时，但没有成功。我还尝试使用 stackoverflow 答案和问题中的一些建议作为参考...

css svg

回答 1 投票 0

如何制作没有子元素的 svg 盒子矩阵 3d

我有matrix3d类svg父级，如何使其在没有子路径的情况下改变？。矩阵 { 溢出：可见；变换：matrix3d(0.524752, -0.50495, 0, 0.010099, -0.475248, 0.49505, 0, 0.0095049, 0, 0,...

css svg matrix transform

回答 1 投票 0

SVG 不尊重父容器的宽度和高度

我正在尝试在网站上使用我在 Figma 中制作的一些 SVG。对于我的一生，我无法让 SVG 尊重父容器。我正在使用 Tailwind 作为 CSS。这是代码： <p>我正在尝试在网站上使用我在 Figma 中制作的一些 SVG。对于我的一生，我无法让 SVG 尊重父容器。我正在使用 Tailwind 作为 CSS。这是代码：</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code><script src="https://cdn.tailwindcss.com"></script> <div class="space-y-4"> <div class=" w-16 h-16"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-full h-full object-contain"> <path fill="#000" d="M14 68h8a2 2 0 1 0 0-4h-8a2 2 0 1 0 0 4"></path> <path fill="#000" d="m71.86 47.26-4-10A2 2 0 0 0 66 36H54v-7.26l4.98 2.98c.86.5 1.96.32 2.58-.48l8-10c.6-.74.58-1.78-.02-2.52l-10-12c-.18-.22-.4-.38-.64-.5l-12-6c-.78-.4-1.7-.24-2.32.36A12.1 12.1 0 0 1 36 4.14c-3.1 0-6.2-1.18-8.58-3.56C27.04.2 26.52 0 26 0c-.3 0-.6.08-.9.22l-12 6c-.24.12-.46.28-.64.5l-10 12c-.6.74-.62 1.78-.02 2.52l8 10c.62.8 1.72.98 2.58.48L18 28.74V36H6a2 2 0 0 0-1.86 1.26l-4 10C-.38 48.58.58 50 2 50h2v24c0 1.1.9 2 2 2h60c1.1 0 2-.9 2-2V50h2c1.42 0 2.38-1.42 1.86-2.74M44 6.02c-.02 4.4-3.6 7.98-8 7.98s-7.98-3.58-8-7.98a16.19 16.19 0 0 0 16 0M12.48 27.38l-5.9-7.36L15.26 9.6 24 5.24V6c0 6.62 5.38 12 12 12s12-5.38 12-12v-.76l8.74 4.36 8.68 10.42-5.9 7.36L54 24.06V22c0-1.1-.9-2-2-2s-2 .9-2 2v14H22V22c0-1.1-.9-2-2-2s-2 .9-2 2v2.06zM64 72H8V50h56zM4.96 46l2.4-6h57.28l2.4 6z"></path> </svg> </div></code></pre> </div> </div> <p></p> <p>我在这里做错了什么？</p> <p>蒂亚</p> </question> <answer tick="false" vote="0"> <p>例如，尝试设置最大宽度和高度</p> <pre><code><div class=" max-w-16 max-h-16"> </code></pre> </answer> </body></html>

html css svg tailwind-css

回答 0 投票 0

如何从 <animate> 元素 (SVG) 切换特定 <use> 标签

给出以下示例：给出以下示例： <svg xmlns="http://www.w3.org/2000/svg"> <defs> <rect id="rectangle" fill="red" width="25" height="25"> <animate attributeName="fill" values="red;blue;green;red" dur="1s" repeatCount="indefinite" /> <animate attributeName="x" values="0;50;0" dur="1s" repeatCount="indefinite" /> </rect> </defs>  <use id="rect1" href="#rectangle" />  <use id="rect2" href="#rectangle" y="50" /> </svg> 如何才能让“rect2”只继承“fill”动画？ OBS：我不想做的是在 defs 内创建一个中间“use”元素，因此主矩形将具有填充动画，中间 use 元素将引用主矩形，并声明“x “ 动画片。当然，在外部元素上使用不同的“hrefs”。 <svg xmlns="http://www.w3.org/2000/svg"> <defs> <rect id="rectangle" fill="red" width="25" height="25"> <animate attributeName="fill" values="red;blue;green;red" dur="1s" repeatCount="indefinite" /> </rect> </defs>  <use id="rect1" href="#rectangle" > <animate attributeName="x" values="0;50;0" dur="1s" repeatCount="indefinite" /> </use>  <use id="rect2" href="#rectangle" y="50" /> </svg>

svg svg-animate

回答 1 投票 0

Django 开发服务器可以正确服务 SVG 吗？

我正在尝试使用以下方式提供 svg 地图：我正在尝试使用以下方式提供 svg 地图： <object data="map.svg" type="image/svg+xml" width="400" height="300"> <embed src="map.svg" type="image/svg+xml" width="400" height="300" /> </object> 在 Firefox 中，这会导致插件提示。如果我将map.svg重命名为map.xml，它会正确显示图像。我认为这是因为 Django 的开发服务器（特别是 django.views.static.serve）没有为 svg 提供正确的 mime 类型。这是问题吗？如果是，有补丁吗？我目前没有可用的 Django 来测试它，但看起来静态服务器使用 mimetypes 库来确定内容类型（特别是 Guess_type()）。通过谷歌搜索，我发现了一些代码，你可以将它们放入settings.py中以添加对 svg 内容类型的支持： import mimetypes mimetypes.add_type("image/svg+xml", ".svg", True) mimetypes.add_type("image/svg+xml", ".svgz", True) 还有这篇专门针对 Pylons 的博客文章，但它提到了类似的问题。他指定 MIME 类型存储在“/etc/mime.types”中，并且缺少 SVG，因为它不是官方 MIME 类型。他可能是对的，因为我在 IANA 上找不到 SVG 的 MIME 类型。如果您从常规 django 视图动态提供 SVG，则可以在从该视图返回的 HTTPResponse 对象中指定 mimetype。在这种情况下，您需要为开发和生产使用准备好 mimetype： def myview(request): svg_data = generate_some_svg_data() return HttpResponse(svg_data, mimetype="image/svg+xml") 在我的例子中，发行者是使用 nginx+gunicorn 进行的部署。我的 nginx docker 映像为 .svg 文件提供文本/纯 mimetype。 mime.types 的扩展解决了这个问题： http { include mime.types; types { image/svg+xml svg; } 简单来说，该应用程序不在 nginx 端提供静态文件。在 nginx 端提供静态文件后，一切正常。 # nginx.conf server { ... location /static { root /etc/nginx/html; } } # Dockerfile COPY ./django_app/static /etc/nginx/html/static

python django svg

回答 4 投票 0

哪个JavaScript库可以用贝塞尔曲线进行布尔运算？

是否存在可以对路径（贝塞尔曲线）执行布尔运算的Javascript库？我了解 Paper.js 和 Raphael.js，但现在都无法执行这些操作。

javascript svg html5-canvas bezier boolean-operations

回答 5 投票 0

如何在 HTML 上添加链接到我的 linkedin SVG

我一直在尝试将 linkedin svg 图像添加到 html，将其链接到我的 linkedin 页面。我已经设法让图像在本地显示，但这在浏览器上不起作用（图像不...

svg hyperlink icons

回答 1 投票 0

如何将 svg 路径置于 svg 圆的中心？

我有 GitHub 徽标的 svg（取自 Simple Icons）。我想把这个 svg 放在一个圆圈的中心，这样它看起来像这样：我尝试从 svg 中获取路径并创建另一个......