SVG <object>, <img>и <use>при использовании «фрагментации» с <symbol>svg в 1 файле, не отображающем svg - PullRequest
Новая
       109

SVG <object>, <img>и <use>при использовании «фрагментации» с <symbol>svg в 1 файле, не отображающем svg

1 голос
/ 09 июля 2020

Итак, у меня проблемы с svg и всеми его причудами, когда я не могу <use> an <svg> из файла, в котором я храню все свои <svg> проекты.

Я пробовал использовать различные методы для отображения <svg> с использованием <object> <img> & <svg> <use>, но безуспешно.

svg просто не отображается в браузере, когда у меня есть an svg внутри a <symbol>, который содержит другие атрибуты, такие как <g> или <defs>, однако <symbol> svg, содержащие только <path>, работают отлично.

Структура проекта: 


assets/
  |-> svg-icons.svg (<-- Main SVG icons location)
  |-> checkMark.svg (<-- Copy of <symbol id="checkMark" in svg-icons.svg)

index.html

svg-icons.svg 

<svg xmlns="http://www.w3.org/2000/svg">

    <!-- 
        Checkmark vector icon 
    -->
    <symbol id="checkMark" width="27" height="27" viewBox="0 0 27 27" fill="black">
        <g filter="url(#filter0_d)">
            <path
                d="M13.6635 6.5408C9.67777 6.5408 6.43506 9.78351 6.43506 13.7692C6.43506 17.7549 9.67777 20.9977 13.6635 20.9977C17.6492 20.9977 20.8919 17.7549 20.8919 13.7692C20.8919 9.78351 17.6492 6.5408 13.6635 6.5408ZM17.4254 11.3467L12.7547 16.907C12.7035 16.968 12.6397 17.0173 12.5678 17.0515C12.4958 17.0858 12.4174 17.1042 12.3377 17.1054H12.3283C12.2504 17.1054 12.1733 17.089 12.1021 17.0573C12.0309 17.0255 11.9672 16.9792 11.9151 16.9212L9.91339 14.6971C9.86255 14.6432 9.82301 14.5796 9.79708 14.5102C9.77115 14.4408 9.75936 14.3669 9.76239 14.2929C9.76543 14.2188 9.78324 14.1461 9.81478 14.0791C9.84631 14.012 9.89093 13.9519 9.94601 13.9024C10.0011 13.8528 10.0655 13.8147 10.1355 13.7904C10.2055 13.7661 10.2797 13.756 10.3537 13.7608C10.4276 13.7655 10.4999 13.785 10.5662 13.8181C10.6325 13.8512 10.6915 13.8972 10.7398 13.9534L12.3137 15.7021L16.574 10.6315C16.6695 10.521 16.8047 10.4525 16.9503 10.4409C17.096 10.4293 17.2403 10.4755 17.3521 10.5695C17.464 10.6634 17.5344 10.7976 17.5481 10.943C17.5618 11.0885 17.5177 11.2335 17.4254 11.3467V11.3467Z"
                fill="#333333" />
        </g>
        <defs>
            <filter id="filter0_d" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                <feOffset />
                <feGaussianBlur stdDeviation="2.78016" />
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
            </filter>
        </defs>
    </symbol>

    <!-- House on sale/rent vector icon -->
    <symbol id='sell-house-vector' width="44" height="52" viewBox="0 0 44 52">
        <path
            d="M10.6449 38.3145C10.6449 39.419 11.5403 40.3145 12.6449 40.3145H40.5794C41.684 40.3145 42.5794 39.419 42.5794 38.3145V14.9915C42.5794 13.887 41.684 12.9915 40.5794 12.9915H12.6449C11.5403 12.9915 10.6449 13.887 10.6449 14.9915V38.3145ZM25.5578 16.8353C26.3121 16.1898 27.4259 16.1954 28.1737 16.8485L36.796 24.3786C37.3467 24.8596 37.0065 25.7662 36.2754 25.7662C35.8382 25.7662 35.4839 26.1205 35.4839 26.5576V35.8306C35.4839 36.9351 34.5885 37.8306 33.4839 37.8306H30.7414C29.6369 37.8306 28.7414 36.9351 28.7414 35.8306V31.3145C28.7414 30.2099 27.846 29.3145 26.7414 29.3145H26.4829C25.3783 29.3145 24.4829 30.2099 24.4829 31.3145V35.8306C24.4829 36.9351 23.5874 37.8306 22.4829 37.8306H20.0966C18.992 37.8306 18.0966 36.9351 18.0966 35.8306V26.5689C18.0966 26.1256 17.7372 25.7662 17.2939 25.7662C16.5484 25.7662 16.2056 24.8384 16.772 24.3536L25.5578 16.8353ZM9.09657 6.2501C7.992 6.2501 7.09657 5.35467 7.09657 4.2501V2C7.09657 0.895432 6.20114 0 5.09657 0H2C0.89543 0 0 0.895431 0 2V49.3145C0 50.419 0.89543 51.3145 2 51.3145H5.09657C6.20114 51.3145 7.09657 50.419 7.09657 49.3145V11.4443C7.09657 10.3397 7.992 9.44429 9.09657 9.44429H42.4029C43.285 9.44429 44 8.72924 44 7.84719C44 6.96514 43.285 6.2501 42.4029 6.2501H9.09657Z" />
    </symbol>

    <!-- Search Property vector icon -->
    <symbol id='search-vector' width="35" height="34" viewBox="0 0 35 34">
        <path fill-rule="evenodd" clip-rule="evenodd"
            d="M25.7641 23.2125C28.0071 20.3208 29.0643 16.6831 28.7204 13.0396C28.3765 9.39611 26.6575 6.02045 23.9131 3.59938C21.1687 1.17831 17.605 -0.1063 13.9471 0.00689208C10.2891 0.120084 6.81171 1.62258 4.22224 4.2087C1.63051 6.79661 0.12311 10.2754 0.00721327 13.9361C-0.108684 17.5968 1.17565 21.164 3.59848 23.9107C6.02132 26.6574 9.40031 28.3768 13.0469 28.7187C16.6935 29.0606 20.3332 27.9991 23.2243 25.7506L23.3016 25.8315L30.932 33.4637C31.0991 33.6308 31.2975 33.7633 31.5158 33.8538C31.7342 33.9442 31.9682 33.9908 32.2046 33.9908C32.4409 33.9908 32.675 33.9442 32.8933 33.8538C33.1117 33.7633 33.3101 33.6308 33.4772 33.4637C33.6443 33.2965 33.7769 33.0981 33.8673 32.8798C33.9578 32.6614 34.0043 32.4274 34.0043 32.191C34.0043 31.9547 33.9578 31.7207 33.8673 31.5023C33.7769 31.2839 33.6443 31.0855 33.4772 30.9184L25.8451 23.2881C25.8188 23.2622 25.7918 23.237 25.7641 23.2125ZM22.0299 6.75394C23.0455 7.75311 23.8532 8.94347 24.4064 10.2564C24.9597 11.5692 25.2475 12.9787 25.2533 14.4034C25.2591 15.828 24.9828 17.2398 24.4402 18.5571C23.8977 19.8745 23.0997 21.0714 22.0923 22.0788C21.0849 23.0862 19.888 23.8842 18.5707 24.4267C17.2533 24.9692 15.8416 25.2455 14.4169 25.2397C12.9922 25.2339 11.5828 24.9461 10.2699 24.3929C8.95701 23.8397 7.76665 23.032 6.76748 22.0164C4.77071 19.9868 3.65681 17.2505 3.6684 14.4034C3.68 11.5563 4.81615 8.82906 6.82937 6.81583C8.8426 4.80261 11.5698 3.66646 14.4169 3.65486C17.264 3.64327 20.0004 4.75717 22.0299 6.75394Z" />
    </symbol>
</svg>

checkMark.svg 

<svg xmlns="http://www.w3.org/2000/svg" id="checkMark" width="27" height="27" viewBox="0 0 27 27" fill="black">
    <g filter="url(#filter0_d)">
        <path
            d="M13.6635 6.5408C9.67777 6.5408 6.43506 9.78351 6.43506 13.7692C6.43506 17.7549 9.67777 20.9977 13.6635 20.9977C17.6492 20.9977 20.8919 17.7549 20.8919 13.7692C20.8919 9.78351 17.6492 6.5408 13.6635 6.5408ZM17.4254 11.3467L12.7547 16.907C12.7035 16.968 12.6397 17.0173 12.5678 17.0515C12.4958 17.0858 12.4174 17.1042 12.3377 17.1054H12.3283C12.2504 17.1054 12.1733 17.089 12.1021 17.0573C12.0309 17.0255 11.9672 16.9792 11.9151 16.9212L9.91339 14.6971C9.86255 14.6432 9.82301 14.5796 9.79708 14.5102C9.77115 14.4408 9.75936 14.3669 9.76239 14.2929C9.76543 14.2188 9.78324 14.1461 9.81478 14.0791C9.84631 14.012 9.89093 13.9519 9.94601 13.9024C10.0011 13.8528 10.0655 13.8147 10.1355 13.7904C10.2055 13.7661 10.2797 13.756 10.3537 13.7608C10.4276 13.7655 10.4999 13.785 10.5662 13.8181C10.6325 13.8512 10.6915 13.8972 10.7398 13.9534L12.3137 15.7021L16.574 10.6315C16.6695 10.521 16.8047 10.4525 16.9503 10.4409C17.096 10.4293 17.2403 10.4755 17.3521 10.5695C17.464 10.6634 17.5344 10.7976 17.5481 10.943C17.5618 11.0885 17.5177 11.2335 17.4254 11.3467V11.3467Z"
            fill="#333333" />
    </g>
    <defs>
        <filter id="filter0_d" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset />
            <feGaussianBlur stdDeviation="2.78016" />
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
        </filter>
    </defs>
</svg>

index. html

<!-- Does not work -->
<img src="./assets/svg-icons.svg#checkMark" alt="design-img" title="design-img">

<!-- Does not work -->
<object type='image/svg+xml'data="./assets/svg-icons.svg#checkMark"> </object>

<!-- Does not work -->
<svg width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="./assets/svg-icons.svg#checkMark"></use>
</svg>

<!-- Works! -->
<svg width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="./assets/svg-icons.svg#sell-house-vector"></use>
</svg>

<!-- Does not work -->
<svg width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="./assets/checkMark.svg"></use>
</svg>

<!-- Works -->
<object type='image/svg+xml'data="./assets/checkMark.svg"> </object>

1 Ответ

0 голосов
/ 09 июля 2020

Попробуйте следующее: в ./assets/svg-icons.svg измените все <symbol> в <svg> и добавьте 

<style type="text/css">

 <![CDATA[  
    svg > svg:not(:target) {
    display: none;
    }
    ]]> 
</style>

Это означает, что должны отображаться только целевые вложенные элементы svg.

Теперь в индексе. html вы должны увидеть изображение и объект.

Прочтите о Как работают идентификаторы фрагментов SVG

...