Невозможно получить клип-путь для моего логотипа

Я хочу анимировать логотип моей компании, чтобы выглядеть так, как написано. У меня есть оригинальный SVG с контурами логотипа и созданы отдельные пути, которые будут функционировать как маска, которая будет анимирована.Невозможно получить клип-путь для моего логотипа

По какой-то причине маска не покрывает оригинальный логотип, а если вы показываете путь маски, он должен покрывать логотип.

Может ли кто-нибудь помочь мне?

Мой код до сих пор находится на CodePen здесь: http://codepen.io/MRSYDSTER/pen/XpWwdB

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Grip Dashing</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 

    <style> 
    </style> 
</head> 


<body> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> 
        <path id="r" clip-path="url(#myClip)" fill="#44A647" d="M7.066,8.727L7.001,8.29H6.476v2.617H7.13V9.301c0.251-0.308,0.397-0.453,0.564-0.453 
         c0.076,0,0.22,0.02,0.276,0.04L8.045,8.27C7.955,8.244,7.869,8.232,7.743,8.232C7.474,8.232,7.313,8.385,7.066,8.727z"/> 
        <polygon id="i" clip-path="url(#myClip)" fill="#44A647" points="8.539,8.794 8.941,8.794 8.941,10.907 9.596,10.907 9.596,8.29 8.539,8.29  "/> 
        <path id="gp" clip-path="url(#myClip)" fill="#44A647" d="M11.56,5.534c-0.37,0-0.748,0.061-1.13,0.181c-0.384-1.318-1.596-2.245-2.996-2.245 
         c-1.403,0-2.629,0.94-3.004,2.271C4.34,5.735,4.251,5.731,4.161,5.731c-1.896,0-3.438,1.542-3.438,3.438 
         c0,0.865,0.322,1.692,0.909,2.329c0.448,0.484,0.941,0.808,1.531,0.966c0.093,0.025,0.337,0.078,0.579,0.113 
         c0.221,0.032,0.439,0.046,0.525,0.052c0.094,0.005,0.185,0.008,0.269,0.008c0.89,0,1.337-0.354,1.337-1.181V8.418 
         C5.42,8.292,5.107,8.246,4.786,8.246c-0.965,0-1.415,0.611-1.415,1.42c0,0.691,0.327,1.252,1.073,1.252 
         c0.302,0,0.522-0.106,0.774-0.318v0.947c0,0.45-0.213,0.576-0.707,0.576c-0.253,0-0.531-0.015-0.764-0.044 
         c-1.194-0.121-2.472-1.426-2.472-2.908c0-1.591,1.293-2.885,2.885-2.885c0.571,0,1.125,0.167,1.598,0.483 
         c0.126,0.085,0.298,0.051,0.383-0.076c0.084-0.128,0.051-0.299-0.077-0.385c-0.333-0.222-0.7-0.382-1.084-0.475 
         c0.327-1.062,1.319-1.807,2.452-1.807c1.169,0,2.18,0.786,2.478,1.896C9.46,6.162,9.149,6.55,8.996,6.933 
         c-0.062,0.153-0.13,0.525-0.133,0.568C8.862,7.512,8.862,7.523,8.862,7.534c0,0.233,0.167,0.389,0.399,0.389 
         c0.233,0,0.398-0.156,0.398-0.389c0-0.148-0.067-0.264-0.174-0.329c0.109-0.331,0.414-0.701,0.847-0.871 
         c0.002,0,0.003-0.001,0.004-0.002c0.418-0.163,0.829-0.246,1.224-0.246c1.744,0,3.164,1.419,3.164,3.164 
         c0,1.605-1.009,2.95-2.6,3.136c-0.232,0.029-0.507,0.046-0.759,0.046c-0.496,0-0.711-0.126-0.711-0.577V11.57v-0.637 
         c0.151,0.03,0.333,0.056,0.509,0.056c0.919,0,1.344-0.648,1.344-1.455c0-0.703-0.325-1.263-1.058-1.263 
         c-0.383,0-0.64,0.152-0.882,0.409l-0.051-0.34H9.999v3.23v0.196c0,0.828,0.45,1.181,1.338,1.181c0.248,0,0.556-0.025,0.809-0.076 
         c1.87-0.219,3.131-1.734,3.131-3.62C15.277,7.202,13.609,5.534,11.56,5.534z M4.582,10.393c-0.404,0-0.524-0.353-0.524-0.793 
         c0-0.529,0.24-0.847,0.68-0.847c0.181,0,0.33,0.04,0.481,0.1v1.197C5.017,10.276,4.82,10.393,4.582,10.393z M10.653,9.18 
         c0.25-0.262,0.423-0.383,0.655-0.383c0.379,0,0.505,0.353,0.505,0.813c0,0.555-0.222,0.864-0.661,0.864 
         c-0.207,0-0.348-0.051-0.499-0.111V9.18z"/> 
    <defs> 
     <clipPath id="myClip"> 
      <path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M10.5,8.9c0.6-0.2,1.7-0.8,1.7,0.8 
       c0,0.8-0.6,0.9-1.6,1"/> 
      <path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M9.4,8c-0.6-1.5,1.1-2.2,2.1-2.2 
       c2.4,0.1,3.2,1.6,3.5,3.3c0.4,2.7-3.3,4.1-4.2,3.5c-0.3-0.2-0.5-0.7-0.6-1.7c0-1.2,0.2-1.1-0.1-2.7"/> 
      <path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M8.5,8.5c0.5,0,0.7,0.1,0.8,0.1 
       s-0.1,1.3,0,2.4"/> 
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M6.9,9.1c0.4-0.2,0.9-0.5,1.3-0.7"/> 
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M6.8,11c-0.1-0.9-0.2-1.9-0.3-2.8"/> 
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M4.7,5.8c0.2-1.3,1.5-2.1,2.8-2.1s2.2,0.9,2.7,2.1"/> 
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M5.2,10.3c-0.5,0-0.8,0.4-1.1,0.1c-0.4-0.3-0.4-1-0.2-1.4 
       c0.4-0.7,1.4-0.7,1.7-0.4c0.1,0.1,0,0.3,0,0.3c0,1.3,0,2.6,0,2.7c-0.3,0.8-1.8,0.7-2.7,0.4c-1.3-0.5-2.2-2.2-1.8-3.8 
       c0.4-1.5,2-2.2,3.3-2.1c1.1,0.1,1.5,0.4,1.7,0.7"/> 
     </clipPath> 
    </defs> 
    </svg> 

<script> 
var paths = $(‘path:not(defs path)’); 

paths.each(function(i, e) { 
    e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength(); 
}); 

var tl = new TimelineMax(); 

tl.add([ 
    TweenLite.to(paths.eq(0), 1, {strokeDashoffset: 0, delay: 0.0}), 
    TweenLite.to(paths.eq(1), 1, {strokeDashoffset: 0, delay: 0.5}), 
]); 

</script> 

</body> 
</html>

источник

2017-01-04 Sydney Smit

Я извлек путь клип из вашего SVG и в конечном итоге с этим:

<svg viewBox="0 0 16 16" width="200" height="200"> 
 
    <g fill="#000" fill-opacity="0.2" stroke="#000" stroke-width="0.05"> 
 
    <path d="M10.5,8.9c0.6-0.2,1.7-0.8,1.7,0.8c0,0.8-0.6,0.9-1.6,1" /> 
 
    <path d="M9.4,8c-0.6-1.5,1.1-2.2,2.1-2.2c2.4,0.1,3.2,1.6,3.5,3.3 
 
\t  c0.4,2.7-3.3,4.1-4.2,3.5c-0.3-0.2-0.5-0.7-0.6-1.7c0-1.2,0.2-1.1 
 
\t  -0.1-2.7" /> 
 
    <path d="M8.5,8.5c0.5,0,0.7,0.1,0.8,0.1s-0.1,1.3,0,2.4" /> 
 
    <path d="M6.9,9.1c0.4-0.2,0.9-0.5,1.3-0.7" /> 
 
    <path d="M6.8,11c-0.1-0.9-0.2-1.9-0.3-2.8" /> 
 
    <path d="M4.7,5.8c0.2-1.3,1.5-2.1,2.8-2.1s2.2,0.9,2.7,2.1" /> 
 
    <path d="M5.2,10.3c-0.5,0-0.8,0.4-1.1,0.1c-0.4-0.3-0.4-1-0.2-1.4 
 
\t  c0.4-0.7,1.4-0.7,1.7-0.4c0.1,0.1,0,0.3,0,0.3c0,1.3,0,2.6,0, 
 
\t  2.7c-0.3,0.8-1.8,0.7-2.7,0.4c-1.3-0.5-2.2-2.2-1.8-3.8c0.4-1.5, 
 
\t  2-2.2,3.3-2.1c1.1,0.1,1.5,0.4,1.7,0.7" /> 
 
    </g> 
 
</svg>

Это выглядит как вы ожидали, что части обводки этого обтравочного контура будут включены в область маскировки. Я боюсь, что это не так, как работают обтравочные контуры. As per the SVG specification,

Необработанной геометрия каждого дочернего элемента исключительного рендеринга свойства, такие как «заливка», «инсульт», «штрих-ширина» в «clipPath» концептуально определяет 1-битовую маску (с возможное исключение сглаживания по краю геометрии), который представляет собой силуэт графики, связанной с этим элементом. Все, что находится за пределами объекта объекта, замаскировано.

В основном, stroke-width атрибутов в ваших подрезках путях не имеют никакого эффекта. Вы должны расширить их на заполненные регионы, если хотите, чтобы они делали что-нибудь полезное.

В качестве альтернативы, преобразование логотипа в набор штриховых дорожек без заливок. Это немного изменит внешний вид, но приблизит вас к тому эффекту, который вы пытаетесь достичь.

источник

2017-01-04 15:29:51

Или используйте маску вместо клипа. В маске цвет хода и размер * делают * вклад. –

Невозможно получить клип-путь для моего логотипа

ответ

Смежные вопросы