inkscape 相关问题

关于编写Inkscape矢量图形应用程序脚本的编程问题，例如：使用Inkscape CLI作为图形转换工作流程的一部分。关于安装应用程序的问题应该在Super User上进行。有关使用该应用程序的问题应继续使用平面设计。

我想将文件夹 C:\Users\Eric\Desktop\svg 中的多个 SVG 文件转换为名称为 [SVG 文件名].svg.png 的 512x512 PNG 文件。我尝试了以下命令： for /f %f in ('dir /b "C:\Us...

windows svg png inkscape

回答 3 投票 0

尝试将 SVG 图像添加到 xcode 资源时出错

我已使用 vectorizer.io 网站将图像从 PNG 转换为 SVG。使用 Chrome 浏览器和 GIMP 查看时，SVG 图像看起来不错。但是当我尝试将其添加到资产文件夹中时...

xcode svg inkscape xcasset

回答 2 投票 0

根据clipPath元素更改要剪切的SVG路径

我有一个如下所示的 SVG：我有一个如下所示的 SVG： <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 576 576"> <defs> <style>...</style> <clipPath id="clip-path"> <rect class="cls-1" x="0.02" width="575.04" height="576"/> </clipPath> </defs> <g class="cls-2"> <path class="cls-3" d="M137.91-147.28c-4-1.67-8.25-3.46-12.37-3.86-5.43-.53-9.26,1.73-12.55,5a18.75,18.75,0,0,0-4.69-9.42,19.23,19.23,0,0,0-6.45-... <path class="cls-4" d="M.08,502.59c-.79-5.67-6.22-4.3-5.81-.22a17.15,17.15,0,0,1,0,2.95c-.22,2.82-1.46,7.6-5,7.61-1.35,0-2.61-1-3.12... ... 我想改变它：没有分组（这很简单）更改 path、rect 等元素，以便根据 clipPath 元素中的内容进行剪辑。 clipPath 不应再出现在 SVG 中（因为不再需要它）我试过这个： inkscape --actions \ "select-all:groups; SelectionUnGroup; ObjectUnSetClipPath; export-filename: output.svg; export-plain-svg; export-do;" \ Decorations.svg 这会删除分组，但 path 元素不会被剪裁。 clipPath 仍然存在。 ObjectUnSetClipPath 将删除剪辑属性 clip-path="url(#clip-path)" – 而不是 <def> 剪辑路径本身。但是如果你的clipPath定义被删除，你就不能剪辑任何元素。 function stripClip(el){ let clipPaths = document.querySelector(el).querySelectorAll('clipPath'); if(clipPaths.length){ clipPaths.forEach(function(item, i){ item.remove(); } ) } } svg{ width: 20vw; } .clipped{ clip-path: url(#clip-path2); } <p><button onclick="stripClip('#svg1')" >remove ClipPath</button></p> <svg id="svg1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36"> <defs> <style>...</style> <clipPath id="clip-path"> <rect class="cls-1" x="10" width="36" height="18"/> </clipPath> </defs> <g class="cls-2"> <path clip-path="url(#clip-path)" d="M18 2.0845 a 15.9155 15.916 0 0 1 0 31.83 a 15.916 15.916 0 0 1 0 -31.83z" fill="red" /> <rect clip-path="url(#clip-path)" x="0" y="0" width="10" height="25" /> </g> </svg> <svg id="svg2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36"> <defs> <style>...</style> <clipPath id="clip-path2"> <rect class="cls-1" x="10" width="36" height="18"/> </clipPath> </defs> <g class="cls-2"> <path class="clipped" d="M18 2.0845 a 15.9155 15.916 0 0 1 0 31.83 a 15.916 15.916 0 0 1 0 -31.83z" fill="red" /> <rect class="clipped" x="0" y="0" width="10" height="25" /> </g> </svg> 编辑：使用 paper.js 获取 svg 交叉路径诚然，这不是最方便的方法，但它是可能的：除了 paper.js 之外，我们还需要一些脚本/帮助程序将 svg 形状（圆形、矩形等）转换为 <path> 元素（我正在使用 'pathThatSvg' ，因为 paper.js 只能基于 2 个路径元素计算新的交叉路径，如下所示： var intersectionPath = path1.intersect(clipPath); 基于这个答案 var svg = document.querySelector("#svgIntersect"); // set auto ids for processing function setAutoIDs(svg) { var svgtEls = svg.querySelectorAll( "path, polygon, rect, circle, line, text, g" ); svgtEls.forEach(function (el, i) { if (!el.getAttribute("id")) { el.id = el.nodeName + "-" + i; } }); } setAutoIDs(svg); // convert shapes to paths function shapesToPath(svg) { pathThatSvg(svg.outerHTML).then((converted) => { var tmp = document.createElement("div"); tmp.innerHTML = converted; svg.innerHTML = tmp.querySelector("svg").innerHTML; }); } shapesToPath(svg); function intersectPath(svg, decimals=2) { // init paper.js and add canvas canvas = document.createElement('canvas'); canvas.id = "canvasPaper"; canvas.setAttribute('style','display:none') document.body.appendChild(canvas); paper.setup("canvasPaper"); // process clipped elements var all = paper.project.importSVG(svg, function (item, i) { item.position = new paper.Point( item.bounds.width / 2, item.bounds.height / 2 ); //item.scale(0.5, new Point(0, 0) ) var items = item.getItems(); var ids = item._namedChildren; var groups = item.children; groups.forEach(function (gr, i) { var group = gr["_namedChildren"]; if (group) { for (key in group) { //get clip path var clip = group["clipPath"][0]; if (key !== "clipPath") { var el = group[key][0]; //get intersection path and generate d commands var elClipped = el.intersect(clip); var elClippedD = elClipped .exportSVG({ precision: decimals }) .getAttribute("d"); // select path by id and overwrite d attribute var newEl = svg.querySelector("#" + key); newEl.setAttribute("d", elClippedD); } } } }); // remove clip defs and attributes var clippedEls = svg.querySelectorAll("[clip-path]"); clippedEls.forEach(function (clippedEl, e) { clippedEl.removeAttribute("clip-path"); }); svg.querySelector("defs").remove(); svg.classList.add("svg-intersect"); console.log(svg.outerHTML) }); } svg{ border: 1px solid #ccc; display:inline-block; width:200px; } .svg-intersect path{ stroke:red; stroke-width: 0.25; } <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pathThatSvg.umd.min.js"></script> <p> <button type="button" onclick="intersectPath(svg)">get Path Intersect</button> </p> <svg id="svgIntersect" viewBox="0 0 100 100"> <defs> <clipPath id="clipPath"> <circle cx="25" cy="25" r="25"/> </clipPath> </defs> <g id="clipGroup" clip-path="url(#clipPath)"> <circle fill="#999" data-id="circle" cx="25" cy="25" r="25" /> <rect fill="#555" id="rect" x="25" y="25" width="50" height="50" /> </g> <g clip-path="url(#clipPath)"> <circle fill="#444" id="circle2" cx="66" cy="25" r="25" /> <rect fill="#22" id="rect2" x="15" y="12.5" width="20" height="75" /> </g> </svg>

svg inkscape

回答 1 投票 0

填充 inkscape 中具有相同编号的区域

我想用特定的颜色为图片中的所有编号区域着色。例如，我想将标有数字 3 的所有内容填充为红色。这可能吗？如果我需要提供更多详细信息，我

autofill inkscape

回答 0 投票 0

如何在 inkscape 中更改图层宽度和高度

当我想在带有M1 pro芯片的macOS 13.2中的inkscape Inkscape 1.2.1（9c6d41e，2022-07-14）中更改图层宽度和高度时，我发现某些图层无法拖动以调整图形大小。例如...

svg inkscape

回答 0 投票 0

在来自 `<image>` 或 `<use>` 元素的 SVG 文件中应用转换转换

所以基本上我想转换这个：转换=“翻译（...）” 到 x/y 坐标。在元素上附加信息：与此问题类似但更具体：删除