0
應該在哪裏我把下面的代碼序獲得動畫像「https://codepen.io/Zeaklous/pen/kyGqm」在我的產品納入SVG矩形在我的網站
<div class="svg-wrapper">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="140" width="140" />
</svg>
這一點，我在我的CSS文件添加CSS
.svg-wrapper svg{
position: absolute;
top: 0;
left: 0;
}
.svg-wrapper {
width: 140px;
height: 140px;
position: relative;
display: inline-block;
cursor: pointer;
margin: 0 auto;
}
.shape {
stroke-dasharray: 0 540;
stroke-dashoffset: -474;
stroke-width: 1px;
fill: transparent;
stroke: #000;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.svg-wrapper:hover .shape {
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 900;
}
我想要合併上述代碼的產品頁面如下：
{$number_line = 1}
{$id_lang = Context::getContext()->language->id}
{foreach from=$group_cat_info item=cat_info name=g_cat_info}
<div class="block-content">
<div id="wt-prod-cat-{$cat_info.id_cat}" class="row">
<div class="cat-bar col-sm-12">
<div class="out-wt-prod">
{if $cat_info.cat_icon!='' }
<div class="icon_cat" style="background-color:{$cat_info.cat_color|escape:'html':'UTF-8'}">
<img src="{$icon_path|escape:'html':'UTF-8'}{$cat_info.cat_icon|escape:'html':'UTF-8'}" alt=""/>
</div>
{/if}
<h3><a href="{$link->getCategoryLink($cat_info.id_cat, $cat_info.link_rewrite)|escape:'html':'UTF-8'}" title="{$cat_info.cat_name|escape:'html':'UTF-8'}">{$cat_info.cat_name|escape:'html':'UTF-8'}</a></h3>
</div>
</div>
{if $group_cat.show_sub == 1}
<div class="sub-cat wt-col-md-2">
<ul class="sub-cat-ul">
{foreach from = $cat_info.sub_cat item=sub_cat name=sub_cat_info}
<li><a href="{$link->getCategoryLink($sub_cat.id_category, $sub_cat.link_rewrite)|escape:'html':'UTF-8'}" title="{$sub_cat.name|escape:'html':'UTF-8'}">{$sub_cat.name|escape:'html':'UTF-8'}</a></li>
{/foreach}
{if isset($cat_info.special_prod_obj) && count($cat_info.special_prod_obj)}
{$cat_product = $cat_info.special_prod_obj}
{$id_lang = Context::getContext()->language->id}
<li class="wt-prod-special">
<a class="product_img_link" href="{$link->getProductLink($cat_product)|escape:'html':'UTF-8'}" title="{$cat_product->name[$id_lang]|escape:'html':'UTF-8'}">
<img class="replace-2x img-responsive" src="{$link->getImageLink($cat_product->link_rewrite[$id_lang], $cat_product->id_image, 'home_default')|escape:'html':'UTF-8'}" alt="" title="{$cat_product->name[$id_lang]|escape:'html':'UTF-8'}"/>
</a>
</li>
{/if}
</ul>
</div>
{/if}
<div class="product_list wt-col-md-12 wt-col-sm-12">
<div class="owl-prod-cat">
{if isset($cat_info.product_list) && count($cat_info.product_list) > 0}
{foreach from=$cat_info.product_list item=product name=product_list}
{if $smarty.foreach.product_list.iteration % $number_line == 1 || $number_line == 1}
<div class="item product-box ajax_block_product">
{/if}
<div class="product-container">
<div class="product-container-hover">
<h5 class="product-name"><a href="{$product.link|escape:'html'}">{$product.name|truncate:25:''|escape:'html':'UTF-8'}</a></h5>
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<div class="content_price">{hook h='displayProductListFunctionalButtons' product=$product}
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
<span class="price product-price">
{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
</span>
{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
{hook h="displayProductPriceBlock" product=$product type="old_price"}
<span class="old-price product-price">
{displayWtPrice p=$product.price_without_reduction}
</span>
{hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"}
{if $product.specific_prices.reduction_type == 'percentage'}
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
{/if}
{/if}
{hook h="displayProductPriceBlock" product=$product type="price"}
{hook h="displayProductPriceBlock" product=$product type="unit_price"}
{/if}
</div>
{/if}
<div class="product-image-container">
<a class="product_img_link" href="{$product.link|escape:'html'}" title="{$product.legend|escape:html:'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:html:'UTF-8'}"height="140" width="140" /></a>
</div>
<div class="">
<div class="button-container">
{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
{if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
{capture}add=1&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}{/capture}
<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
<span>{l s='Add to cart' mod='wtproductcategory'}</span>
</a>
{else}
<span class="button ajax_add_to_cart_button btn btn-default disabled">
<span>{l s='Out of stock' mod='wtproductcategory'}</span>
</span>
{/if}
{/if}
</div>
</div>
</div>
</div>
{if $smarty.foreach.product_list.iteration % $number_line == 0 ||$smarty.foreach.product_list.last || $number_line == 1}
</div>
{/if}
{/foreach}
{else}
<div class="item product-box ajax_block_product">
<p class="alert alert-warning">{l s='No product at this time' mod='wtproductcategory'}</p>
</div>
{/if}
</div>
{if count($cat_info)>0}
<div class="manu-list">
<ul>
{foreach from=$cat_info.manufacture item=manu_item name=manufacture}
<li><a href="#">{$manu_item->name|escape:'html':'UTF-8'}</a></li>
{/foreach}
</ul>
</div>
{/if}
</div>
</div>
</div>
{if $cat_info.show_img == 1 && isset($cat_info.id_image) && $cat_info.id_image > 0}
<div class="cat-img">
<a href="{$link->getCategoryLink($cat_info.id_cat, $cat_info.link_rewrite)|escape:'html':'UTF-8'}" title="{$cat_info.cat_name|escape:'html':'UTF-8'}">
<img src="{$link->getCatImageLink($cat_info.link_rewrite, $cat_info.id_image, 'category_default')|escape:'html':'UTF-8'}"/>
</a>
</div>
{/if}
{/foreach}
@Jesy看到更新:) –
在CSS我有一個淺色邊框的產品。那邊框中看到是創造困難svg border.i刪除了該邊框。現在一切正常。 – Jesy
感謝凱恩的幫助。 – Jesy