バックグラウンドSVGのURLを実際の座標に変更する

Question

これはコード全体です。私がやっているのはバックグラウンドのSVG URLを削除して実際の座標に置き換えることです。

URLを座標に置き換えるだけで、同じように見えますが、そうではありません。

座標を使用しているものをURLを使用するように見えるようにするにはどうすればよいですか？何を変えなければならないのですか？

24幅 29高さ、まさにこのような

。上記

24 X 29

これは23×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/

背景画像URL：

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

これは、URLを使用して次のようになります。

私は上記のように見えるようにしようとしています。

<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

私はあなたに2つの非常に簡単な、比較的ラフな答えを提供しています。 viewBox = "..."をアイコンの周りで調整するか、変換マトリックスを使用するだけです。

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

あなたは、この変異型の両方のためにSVGOのようなものを使用することができ、完璧な結果に到達するために。削除された変換を使用してSVGを調整し、パスやその他の要素で座標を再計算します。

<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>