小编Pau*_*eau的帖子

我想将以下 SVG 用于捐赠页面。我想填满所有的心（不仅仅是边框），并从底部到顶部填充。如何更改填充方向？

https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/

<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
              <path fill-opacity="0" stroke-width="1" stroke="#bbb" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
              <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#ED6A5A" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
          </svg>
</div>

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Path('#heart-path', {
easing: 'easeOut',
duration: 5400
});

bar.set(0);
bar.animate(1.0);  // Number from 0.0 to 1.0

谢谢。

在 Inkscape 中导入以下 SVG 文件仅显示文本但忽略<use>语句（或其引用的组）。这是一个错误还是一个功能？有什么要改变的吗？顺便说一句，该<g>组比示例文件中的组更复杂。该文件在 Chrome 中正确显示。（Windows 10，Inkscape 最新版本）

谢谢！马里奥

<svg width="400" height="200" x="0" y="0"
    xmlns="http://www.w3.org/2000/svg">
<defs>
  <g id="plus">
    <circle cx="40" cy="30" r="20" stroke="#FF0000" fill="none"></circle>
  </g>
</defs>
<svg x="100" y="50">
  <rect x="1" y="1" width="78" height="86" rx="10" ry="10" stroke="#0000FF" fill="none"></rect>
  <use href="#plus"></use>
  <text x="20" y="74" width="68" height="26">ABCD</text>
</svg>
</svg>

Android Studio 向我发送消息"ERROR@ <feGaussianBlur> is not supported" ，"ERROR@ <filter> is not supported"当我尝试将 SVG 导入 xml 时！

我使用 Inkscape 制作和编辑 SVG 文件。任何解决方案？

更新

安卓工作室 3.4.0

矢量xml代码：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="120dp"
    android:height="70dp"
    android:viewportWidth="120"
    android:viewportHeight="70">
  <path
      android:pathData="m29.87,5.114h81.925c2.212,0 3.312,1.83 2.467,4.104l-19.088,51.359c-0.845,2.274 -3.306,4.104 -5.518,4.104L7.731,64.681c-2.212,0 -3.312,-1.83 -2.467,-4.104L24.352,9.218c0.845,-2.274 3.306,-4.104 5.518,-4.104z"
      android:strokeWidth="0.43320084"
      android:fillColor="#000000"
      android:strokeColor="#00000000"
      android:fillAlpha="1"/>
  <path
      android:pathData="m29.87,4.585h81.925c2.212,0 3.312,1.83 2.467,4.104L95.174,60.048c-0.845,2.274 -3.306,4.104 -5.518,4.104L7.731,64.152c-2.212,0 -3.312,-1.83 -2.467,-4.104L24.352,8.689c0.845,-2.274 3.306,-4.104 5.518,-4.104z"
      android:strokeWidth="0.43320084"
      android:fillColor="#aaffaa"
      android:strokeColor="#00000000"/>
</vector>

错误信息：

错误 @line 28: 不支持

错误@line 36: 不支持

我正在学习 SVG。到目前为止，它一直很棒，但现在我坚持使用表值进行颜色传输。下面是一个例子：

<feFuncR type="table" tableValues="1 0 0 0"></feFuncR>

此功能将红色实心条更改为黑色。我想知道tableValues属性是如何工作的，以便我可以自己弄清楚颜色的变化。我找不到任何详细解释它的文章。

我想要 svg 中圆弧的中点..任何人都可以告诉公式来找到圆弧的中点.,

我有一个 SVG：

<svg height="781.8" width="1077.15" xmlns="http://www.w3.org/2000/svg">
    <radialGradient cx="0" cy="0" gradientTransform="matrix(-0.0664, 0.0141, 0.0063, 0.0288, 137.9, -123.45)" gradientUnits="userSpaceOnUse" id="gradient0" r="819.2" spreadMethod="pad">
      <stop offset="0.0" stop-color="#ff0000" stop-opacity="0.34901962"/>
      <stop offset="1.0" stop-color="#ff0000" stop-opacity="0.0"/>
    </radialGradient>
    <g transform="translate(309.85, 414.55) rotate(0, 600, 300)">
       <path transform="translate(-125, -10)" d="M161.0 -139.65 L160.25 -139.45 160.8 -139.85 Q161.55 -140.4 163.6 -140.15 L161.0 -139.65 M92.55 -115.35 Q91.1 -122.1 97.5 -128.9 107.45 -139.25 134.7 -146.75 L142.55 -148.35 Q147.4 -149.25 152.3 -148.3 L160.45 -147.3 161.4 -147.25 159.25 -145.4 Q152.35 -139.0 152.35 -135.5 L152.4 -134.75 152.4 -134.6 151.85 …