Материалы SVG, экспортированные из эскиза, не отображаются в браузере клиента, но хорошо в моем браузере - как проверить? - PullRequest
Новая
       67

Материалы SVG, экспортированные из эскиза, не отображаются в браузере клиента, но хорошо в моем браузере - как проверить?

0 голосов
/ 28 ноября 2018

Я предполагаю, что это проблема экспорта.Пытаясь выяснить, как воссоздать проблему - кто-нибудь испытывает это?Решения также приветствуются.Попробую реэкспорт из Illustrator.

вот некоторые проблемные SVG (значки материалов): 

<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
    <g id="Live-Event-03---Account-Menu" transform="translate(-1160.000000, -158.000000)" fill="#98A4AE">
        <g id="menu" transform="translate(1124.000000, 56.000000)">
            <g id="item" transform="translate(33.000000, 100.000000)">
                <text id="exit_to_app---material">
                    <tspan x="0" y="20"></tspan>
                </text>
            </g>
        </g>
    </g>
</g>


<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="23px" viewBox="0 0 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
    <g id="Modal-05---Share" transform="translate(-477.000000, -395.000000)" fill="#98A4AE">
        <g id="modal" transform="translate(435.000000, 376.000000)">
            <g id="header">
                <text id="send---material">
                    <tspan x="40" y="41"></tspan>
                </text>
            </g>
        </g>
    </g>
</g>

Вот SVG, который был просмотрен правильно (пользовательский): 

<?xml version="1.0" encoding="UTF-8"?>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon/account-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

В итоге мы смогли решить проблему путем экспорта через Illustrator.Вот как выглядел недавно экспортированный код SVG: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.a{fill:#98a4ae;}</style></defs><title>sign-out-gray</title><path class="a" d="M44.2964,7a4.5218,4.5218,0,0,1,3.3027,1.4A4.52,4.52,0,0,1,49,11.7036V44.2964a4.7835,4.7835,0,0,1-4.7031,4.7041H11.7041a4.4923,4.4923,0,0,1-3.332-1.4A4.5585,4.5585,0,0,1,7,44.2964V35h4.7041v9.2969H44.2964V11.7036H11.7041V21H7V11.7036A4.5629,4.5629,0,0,1,8.3721,8.3994,4.4919,4.4919,0,0,1,11.7041,7ZM23.52,36.4l5.9922-6.1045H7V25.7036H29.5122L23.52,19.6l3.3042-3.3042L38.5278,28,26.8242,39.7036Z"/></svg>
0 голосов
/ 29 ноября 2018

У svgs было много преобразований, которые я удалил.Также я мог бы удалить некоторые из вложенных элементов <g>, но, возможно, вы по какой-то причине поместили их туда.Также в CSS я поместил границу в SVG, чтобы вы могли видеть, что между иконкой и границей холста svg есть пробел.Если бы это было для меня, я бы убрал это место, но опять же: оно может вам понадобиться.Надеюсь, это поможет.

svg{border:1px solid}
<svg width="18px" height="19px" viewBox="0 2 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
    <g id="Live-Event-03---Account-Menu"  fill="#98A4AE">
        <g id="menu">
            <g id="item">
                <text id="exit_to_app---material">
                    <tspan y="20"></tspan>
                </text>
            </g>
        </g>
    </g>
</g>
</svg>

<svg width="27px" height="23px" viewBox="0 20 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
    <g id="Modal-05---Share"  fill="#98A4AE">
        <g id="modal" >
            <g id="header">
                <text id="send---material">
                    <tspan y="41"></tspan>
                </text>
            </g>
        </g>
    </g>
</g>
</svg>
  
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon" stroke="black" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>
    
  </svg>
...