Нежелательный SVG «маржа» создается при использовании <clipPath> - PullRequest
Новая
       6

Нежелательный SVG «маржа» создается при использовании <clipPath>

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

Я использую свойство CSS clip-path для ссылки на SVG в моем проекте, который я хотел бы использовать для создания пользовательских фигур. Когда изображение SVG существует в коде как обычное изображение (без clipPath), вы можете видеть, что оно заполняет свой родительский div точно так же, как и должно. Но когда вы добавляете clipPath в SVG и затем ссылаетесь на него в CSS, между верхней и левой сторонами появляется дополнительное пространство. Почти как добавлено поле margin-top и margin-left. Вы можете увидеть это в моем примере со вторым и третьим изображениями. Третий включает в себя objectBoundingBox и необходимое масштабирование в SVG. Проблема все еще существует, только что увеличенная. Что вызывает это и как это исправить?

Вот ручка: https://codepen.io/Wcomp/pen/ZmQrKV?editors=1100

Вот код: 

<!DOCTYPE html>
<html>
<head>  
    <meta charset="utf-8">
    <meta name="description" content="Test Site">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
     html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    * {
        margin: 0;
        padding: 0;
    }
    .borderdiv{
        border: 5px solid darkred;
        max-width: 100%;
        background-color: gold;
    }
    #slotcont1{
        height: 30vh;
        width: 100vw;
        max-width: 100%;
    }
    #slotcont2{
        height: 30vh;
        width: 100vw;
        max-width: 100%;
        background-image: url(https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350);
        background-color: red;
        background-size: 100%;
        background-repeat: no-repeat;
        clip-path: url(#svgPath); 
    }
    #slotcont3{
        height: 30vh;
        width: 100vw;
        max-width: 100%;
        background-image: url(https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350);
        background-color: red;
        background-size: 100%;
        background-repeat: no-repeat;
        clip-path: url(#svgPath2);  
    }
</style>     
<body>
 <div class="borderdiv">
     <div id="slotcont1">
         <svg   
           width="100%"
           height="100%"
           viewBox="0 0 174.625 34.395832"
           version="1.1"
           preserveAspectRatio="none">
              <g transform="translate(-17.175781,-26.945964)">
                    <path
                       style="fill:#000000;stroke-width:0.26458332"
                       d="m 19.821614,26.945964 c -1.322916,0 -2.645833,1.322917 -2.645833,2.645833 v 7.276042 7.276041 7.276042 7.276042 c 0,1.322916 1.322917,2.645833 2.645833,2.645833 h 21.166667 21.166666 21.166667 21.166666 21.16667 21.16666 21.16667 21.16667 c 1.32291,0 2.64583,-1.322917 2.64583,-2.645833 V 51.419922 44.14388 36.867839 29.591797 c 0,-1.322917 -1.32292,-2.645833 -2.64583,-2.645833 H 167.98828 146.82161 125.65495 104.48828 83.321614 62.154947 40.988281 Z"
                       id="path2649" />
              </g>
        </svg>
    </div> 
</div>  
<br>  
<div class="borderdiv">
    <div id="slotcont2">
        <svg
           width="174.625mm"
           height="34.395832mm"
           viewBox="0 0 174.625 34.395832"
           version="1.1"
           preserveAspectRatio="none">
              <g transform="translate(-17.175781,-26.945964)">
                  <clipPath id="svgPath">
                    <path
                       style="fill:#000000;stroke-width:0.26458332"
                       d="m 19.821614,26.945964 c -1.322916,0 -2.645833,1.322917 -2.645833,2.645833 v 7.276042 7.276041 7.276042 7.276042 c 0,1.322916 1.322917,2.645833 2.645833,2.645833 h 21.166667 21.166666 21.166667 21.166666 21.16667 21.16666 21.16667 21.16667 c 1.32291,0 2.64583,-1.322917 2.64583,-2.645833 V 51.419922 44.14388 36.867839 29.591797 c 0,-1.322917 -1.32292,-2.645833 -2.64583,-2.645833 H 167.98828 146.82161 125.65495 104.48828 83.321614 62.154947 40.988281 Z"
                       id="path2649" />
                  </clipPath>
              </g>
         </svg>
    </div>
</div>
<br>  
<div class="borderdiv">
    <div id="slotcont3">
        <svg
            width="174.625mm"
            height="34.395832mm"
            viewBox="0 0 174.625 34.395832"
            version="1.1"
            preserveAspectRatio="none">
              <g transform="translate(-17.175781,-26.945964)">
                  <clipPath id="svgPath2" 
                            clipPathUnits="objectBoundingBox"
                            transform="scale(0.00572655 0.02907329)">
                    <path
                       style="fill:#000000;stroke-width:0.26458332"
                       d="m 19.821614,26.945964 c -1.322916,0 -2.645833,1.322917 -2.645833,2.645833 v 7.276042 7.276041 7.276042 7.276042 c 0,1.322916 1.322917,2.645833 2.645833,2.645833 h 21.166667 21.166666 21.166667 21.166666 21.16667 21.16666 21.16667 21.16667 c 1.32291,0 2.64583,-1.322917 2.64583,-2.645833 V 51.419922 44.14388 36.867839 29.591797 c 0,-1.322917 -1.32292,-2.645833 -2.64583,-2.645833 H 167.98828 146.82161 125.65495 104.48828 83.321614 62.154947 40.988281 Z"
                       id="path2649" />
                  </clipPath>
              </g>
        </svg>
    </div>  
</div>   
</body>
</html>
...