将背景SVG网址更改为实际坐标

Question

这是整个代码，我要做的是删除背景SVG网址并将其替换为实际坐标。

我想通过用坐标替换url，看起来会一样，但事实并非如此。

如何使用坐标看起来像使用网址的坐标？有什么需要改变？

24宽 29高度

正是这样。

以上是24 x 29。

这是23 x 28

-800 -700 2452 3399

坐标

<svg viewBox="0 0 1226 1481" xmlns="http://www.w3.org/2000/svg"><path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/></svg>

与其余代码协调。

<svg viewBox="0 0 1226 1481" style="
    width: 64px;
    height: 64px;
    left: 7px;
    top: 7px;
  background-color: rgba(0,0,0,.7);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 58% 50%;
    border-radius: 500px;
    border: 1px solid red;
    cursor: pointer;
">

<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
 </svg>

当我用坐标替换url时，这就是它的样子。

https://jsfiddle.net/9sok6ycs/2/

背景图片网址

https://jsfiddle.net/9sok6ycs/1/

这就像使用网址一样。

我试图让上面的svg看起来像这个。

<div style="
        width: 64px;
        height: 64px;
        left: 7px;
        top: 7px;
      background-color: rgba(0,0,0,.7);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
        background-repeat: no-repeat;
        background-size: 24px;
        background-position: 58% 50%;
        border-radius: 500px;
        border: 1px solid red;
        cursor: pointer;
    "> </div>

Answer 1

我为您提供了两个非常简短且相对粗略的答案。你可以调整viewBox =＆＃34; ...＆＃34;围绕您的图标或使用变换矩阵。

https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/transform

要获得完美的结果，您可以使用类似SVGO的两种变体。它为您调整SVG并删除了转换，并相应地重新计算路径和其他元素的坐标。

＆＃13;

＆＃13;

<svg viewBox="-800 -700 2452 2962" style="

    width: 64px;
    height: 64px;
    left: 7px;
    top: 7px;
  background-color: rgba(0,0,0,.7);

    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 58% 50%;
    border-radius: 500px;
    border: 1px solid red;
    cursor: pointer;
">

<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/>
 </svg>
 </br>
 <svg viewBox="0 0 1226 1481" style="

    width: 64px;
    height: 64px;
    left: 7px;
    top: 7px;
  background-color: rgba(0,0,0,.7);

    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 58% 50%;
    border-radius: 500px;
    border: 1px solid red;
    cursor: pointer;
">

<path transform="matrix(0.5, 0, 0, 0.5, 350, 380)" d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red" />
 </svg>

＆＃13;

＆＃13;

＆＃13;